初始化環境 npm init -y 初始化項目 安裝各種依賴項 npm install --save vue 安裝vue2.0 npm install --save-dev webpack@^2.1.0-beta.25 webpack-dev-server@^2.1.0-beta.9 安裝webpa ...
初始化環境
npm init -y 初始化項目
安裝各種依賴項
npm install --save vue 安裝vue2.0
npm install --save-dev webpack@^2.1.0-beta.25 webpack-dev-server@^2.1.0-beta.9 安裝webpack以及webpack測試伺服器，預設安裝是1.0版本的，所以必須指定版本號
npm install --save-dev babel-core babel-loader babel-preset-es2015 安裝babel，一般的瀏覽器是不認識es6語法的，babel的作用是將es6的語法編譯成瀏覽器認識的語法
npm install --save-dev vue-loader vue-template-compiler 用來解析vue的組件，.vue尾碼的文件
npm install --save-dev css-loader file-loader 用來解析css
編寫頁面
新建目錄src，裡面新建App.vue
<!-- 簡單寫個title和一個迴圈 --> <template> <div id="example"> <h1>{{ msg }}</h1> <ul> <li v-for="n in 5">{{ n }}</li> </ul> </div> </template> <script> export default { data () { return { msg: 'Hello World!' } } } </script> <style scoped> #example { background: red; height: 100vh; } </style>
在src目錄下新建main.js
/* 引入vue和主頁 */
import Vue from 'vue'
import App from './App.vue'
/* 實例化一個vue */
new Vue({
el: '#app',
render: h => h(App)
})
配置webpack
在根目錄下新建webpack.config.js
/* 引入操作路徑模塊和webpack */ var path = require('path'); var webpack = require('webpack'); module.exports = { /* 輸入文件 */ entry: './src/main.js', output: { /* 輸出目錄，沒有則新建 */ path: path.resolve(__dirname, './dist'), /* 靜態目錄，可以直接從這裡取文件 */ publicPath: '/dist/', /* 文件名 */ filename: 'build.js' }, module: { rules: [ /* 用來解析vue尾碼的文件 */ { test: /\.vue$/, loader: 'vue-loader' }, /* 用babel來解析js文件並把es6的語法轉換成瀏覽器認識的語法 */ { test: /\.js$/, loader: 'babel-loader', /* 排除模塊安裝目錄的文件 */ exclude: /node_modules/ } ] } }
打包項目
npm install -g webpack@^2.1.0-beta.25 全局安裝webpack，以便使用webpack命令
webpack 用webpack命令打包項目，這是目錄下會多出一個dist文件夾，查看裡面會有build.js，發覺裡面的es6語法已經被轉化了
最終項目目錄如圖所示
在根目錄下新建index.html，引入build.js
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <title>vue-webpack</title> </head> <body> <section id="app"></section> <script src="./dist/build.js"></script> </body> </html>
頁面如圖所示:
這樣就算打包完成了，但是每修改一次都要重新打包這樣顯然沒有任何效率，於是需要線上的熱重載
npm install -g webpack-dev-server@^2.1.0-beta.9 全局安裝webpack-dev-server，以便使用webpack-dev-server命令
webpack-dev-server 等待程式運行完畢
在瀏覽器輸入http://localhost:8080/查看頁面
這時修改頁面的代碼，不用刷新瀏覽器直接更改
參考
轉載地址：https://segmentfault.com/a/1190000008166081
參考地址：webpack+vue.js快速入門教程
