標籤：依賴項 目錄 use 重新整理 htm pac ade example out
初始化環境npm init -y 初始化項目
安裝各種依賴項
npm install --save vue 安裝vue2.0
npm install --save-dev [email protected]^2.1.0-beta.25 [email protected]^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 [email protected]^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 [email protected]^2.1.0-beta.9 全域安裝webpack-dev-server，以便使用webpack-dev-server命令
webpack-dev-server 等待程式運行完畢
在瀏覽器輸入http://localhost:8080/查看頁面
這時修改頁面的代碼，不用重新整理瀏覽器直接更改
參考轉載地址：1190000008166081
參考地址：webpack+vue.js快速入門教程
用webpack2.0構建vue2.0超詳細精簡版
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
