本篇文章主要介绍了webpack+vue2构建vue项目骨架的方法，现在分享给大家，也给大家做个参考。
前端项目打包工具webpack与前端开发框架vue，算是现在前后端分离后非常流行的技术了，今天主要讲的是使用webpack和vue2构建一个前后端分离项目的基本骨架。虽然使用vue-cli脚手架可以帮我们搭建好一个项目骨架，但是了解原理我觉得还是很重要的，所以这篇文章主要就写webpack与vue构建一个基础项目。前提是已经安装了nodejs。
整个项目需要通过npm安装的依赖
css ： style-loader、css-loader、sass-loader、node-sass
js：babel-core 、babel-loader、babel-preset-es2015
webpack：webpack、webpack-dev-server
vue：vuer 、vue-loade、vue-html-loader、vue-template-compiler
新建一个项目的目录
我们首先需要新建一个目录myApp用来放我们的项目，在终端里面进入这个项目，然后开始初始化项目。
初始化项目
$ npm init
初始化项目的时候，如果没有特别需要，直接按“回车键”就可以。项目初始化完成后，就会生成一个packge.json文件主要存放项目依赖目录和配置项目启动命令。
安装依赖
$ npm i style-loader --D
使用npm安装依赖的时候，我们会在最后加上“--D”，因为加“--D”后会在packge.json里面留上记录。如果我们将项目在其他系统打开时，会发现开发的时候通过npm安装的依赖不能用了，这是因为存在系统兼容性。而如果开发项目的时候安装依赖加上“--D”，项目里面的node_modules就不需要拷贝过去，而打开项目前，我们只需要通过npm安装所有依赖就可以了。
$ npm i
配置webpack.config.js文件
webpack所有的配置都在webpack.config.js文件里面，所以初始化项目后，我们需要新建一个webpack.config.js文件然后配置。由于上次已经专门写过webpack的基本配置，这儿就不重复了，直接贴上我的配置代码：
module.exports = {
entry: './src/main.js',
output:{
path: __dirname + '/dist/',
filename: 'bundle.js'
},
devtool:'source-map',
devServer:{
// 主要改变项目的根目录
contentBase: __dirname + '/dist/',
port:8080,
inline:true
},
module:{
loaders:[
{test:/\.css$/,loader :'style-loader!css-loader'},
{test:/\.js$/, loader:'babel-loader',exclude:/node_modules/},
{ test: /\.vue$/, loader: 'vue-loader' }
]
},
//vue文件想要解析必须要要加上这句才能成功
resolve: { alias: { 'vue': 'vue/dist/vue.js' } }
}配置package.json
package.json里面需要配置的主要时项目启动命令，一个开发模式的start和打包项目build。
启动项目
$ npm start
打包项目
$ npm run build
整个项目的目录
src：我们开发的源文件都放在这个目录里面
components：用来放所有的组件
styles：存放所有的样式文件
utils：存放所有需要自己写的方法函数
app.vue：所有的vue文件的入口文件
main.js：整个项目的js入口文件
index.html：这个文件可以放在真个项目的根目录myApp里面，也可以放在webpack打包的生成的目录dist里面，如果是放在根目录则webpack.config.js里面的contentBase: __dirname ，如果在dist里面则contentBase: __dirname + '/dist/'。主要改变项目的服务根目录的位置，就是我们localhos:8080打开时浏览器显示的目录。（经过测试放在打包生成的dist目录会好些，主要在开发模式可以实现实时更新。这个可能不太准，后期再测试后进行修改）
index.html文件代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>webpack+vue</title> </head> <body> <p id="app"></p> <script src="./bundle.js"></script> </body> </html>
main.js文件代码
//引入vue框架<br>
//import是es6的写法，其实和var Vue = require('vue')是相同的意义<br>import Vue from 'vue';<br>
//引入App.vue文件，这个文件也是vue所有组件的入口，我们的项目就是将这个文件追加到index.html文件里面
import App from './App.vue';
new Vue({
el:'#app',
components: {App},<br>//主要目点就是将App追加到“#app”里面去
render: h => h(App)
})
App.vue文件代码
<template>
<p>Hello VueJS!</p>
</template>
<script>
export default{
name:"app"
}
</script>到这儿整个项目基本上就完成了基本的结构，在浏览器输入：localhost:8080，就可以看到显示：
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
使用async-validator如何编写Form组件（详细教程）
使用casperjs和resemble.js如何实现像素对比（详细教程）
Atas ialah kandungan terperinci 使用webpack+vue2进行项目构建. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
C dan JavaScript: Sambungan dijelaskanApr 23, 2025 am 12:07 AMC dan JavaScript mencapai interoperabilitas melalui webassembly. 1) Kod C disusun ke dalam modul WebAssembly dan diperkenalkan ke dalam persekitaran JavaScript untuk meningkatkan kuasa pengkomputeran. 2) Dalam pembangunan permainan, C mengendalikan enjin fizik dan rendering grafik, dan JavaScript bertanggungjawab untuk logik permainan dan antara muka pengguna.
Dari laman web ke aplikasi: Aplikasi pelbagai JavaScriptApr 22, 2025 am 12:02 AMJavaScript digunakan secara meluas di laman web, aplikasi mudah alih, aplikasi desktop dan pengaturcaraan sisi pelayan. 1) Dalam pembangunan laman web, JavaScript mengendalikan DOM bersama -sama dengan HTML dan CSS untuk mencapai kesan dinamik dan menyokong rangka kerja seperti JQuery dan React. 2) Melalui reaktnatif dan ionik, JavaScript digunakan untuk membangunkan aplikasi mudah alih rentas platform. 3) Rangka kerja elektron membolehkan JavaScript membina aplikasi desktop. 4) Node.js membolehkan JavaScript berjalan di sisi pelayan dan menyokong permintaan serentak yang tinggi.
Python vs JavaScript: Gunakan Kes dan Aplikasi MembandingkanApr 21, 2025 am 12:01 AMPython lebih sesuai untuk sains data dan automasi, manakala JavaScript lebih sesuai untuk pembangunan front-end dan penuh. 1. Python berfungsi dengan baik dalam sains data dan pembelajaran mesin, menggunakan perpustakaan seperti numpy dan panda untuk pemprosesan data dan pemodelan. 2. Python adalah ringkas dan cekap dalam automasi dan skrip. 3. JavaScript sangat diperlukan dalam pembangunan front-end dan digunakan untuk membina laman web dinamik dan aplikasi satu halaman. 4. JavaScript memainkan peranan dalam pembangunan back-end melalui Node.js dan menyokong pembangunan stack penuh.
Peranan C/C dalam JavaScript Jurubah dan PenyusunApr 20, 2025 am 12:01 AMC dan C memainkan peranan penting dalam enjin JavaScript, terutamanya digunakan untuk melaksanakan jurubahasa dan penyusun JIT. 1) C digunakan untuk menghuraikan kod sumber JavaScript dan menghasilkan pokok sintaks abstrak. 2) C bertanggungjawab untuk menjana dan melaksanakan bytecode. 3) C melaksanakan pengkompil JIT, mengoptimumkan dan menyusun kod hot-spot semasa runtime, dan dengan ketara meningkatkan kecekapan pelaksanaan JavaScript.
JavaScript in Action: Contoh dan projek dunia nyataApr 19, 2025 am 12:13 AMAplikasi JavaScript di dunia nyata termasuk pembangunan depan dan back-end. 1) Memaparkan aplikasi front-end dengan membina aplikasi senarai TODO, yang melibatkan operasi DOM dan pemprosesan acara. 2) Membina Restfulapi melalui Node.js dan menyatakan untuk menunjukkan aplikasi back-end.
JavaScript dan Web: Fungsi teras dan kes penggunaanApr 18, 2025 am 12:19 AMPenggunaan utama JavaScript dalam pembangunan web termasuk interaksi klien, pengesahan bentuk dan komunikasi tak segerak. 1) kemas kini kandungan dinamik dan interaksi pengguna melalui operasi DOM; 2) pengesahan pelanggan dijalankan sebelum pengguna mengemukakan data untuk meningkatkan pengalaman pengguna; 3) Komunikasi yang tidak bersesuaian dengan pelayan dicapai melalui teknologi Ajax.
Memahami Enjin JavaScript: Butiran PelaksanaanApr 17, 2025 am 12:05 AMMemahami bagaimana enjin JavaScript berfungsi secara dalaman adalah penting kepada pemaju kerana ia membantu menulis kod yang lebih cekap dan memahami kesesakan prestasi dan strategi pengoptimuman. 1) aliran kerja enjin termasuk tiga peringkat: parsing, penyusun dan pelaksanaan; 2) Semasa proses pelaksanaan, enjin akan melakukan pengoptimuman dinamik, seperti cache dalam talian dan kelas tersembunyi; 3) Amalan terbaik termasuk mengelakkan pembolehubah global, mengoptimumkan gelung, menggunakan const dan membiarkan, dan mengelakkan penggunaan penutupan yang berlebihan.
Python vs JavaScript: Keluk Pembelajaran dan Kemudahan PenggunaanApr 16, 2025 am 12:12 AMPython lebih sesuai untuk pemula, dengan lengkung pembelajaran yang lancar dan sintaks ringkas; JavaScript sesuai untuk pembangunan front-end, dengan lengkung pembelajaran yang curam dan sintaks yang fleksibel. 1. Sintaks Python adalah intuitif dan sesuai untuk sains data dan pembangunan back-end. 2. JavaScript adalah fleksibel dan digunakan secara meluas dalam pengaturcaraan depan dan pelayan.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
PhpStorm versi Mac
Alat pembangunan bersepadu PHP profesional terkini (2018.2.1).
MantisBT
Mantis ialah alat pengesan kecacatan berasaskan web yang mudah digunakan yang direka untuk membantu dalam pengesanan kecacatan produk. Ia memerlukan PHP, MySQL dan pelayan web. Lihat perkhidmatan demo dan pengehosan kami.
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
MinGW - GNU Minimalis untuk Windows
Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.
Versi Mac WebStorm
Alat pembangunan JavaScript yang berguna
