第一講 Webpack+Vue快速入門 === [TOC] ## 安裝Vue 在用 Vue.js 構建大型應用時推薦使用 NPM 安裝， NPM 能很好地和諸如?[Webpack](http://webpack.github.io/)?模塊打包器配合使用。 1、 首先下載安裝Node.js開發環境 [Node.js](http://nodejs.cn/) 是一個基于 Chrome V8 引擎的 JavaScript 運行環境。 > *Node*是一個讓 JavaScript 運行在服務端的開發平臺，它讓 JavaScript 成為與PHP、Python、Perl、Ruby 等服務端語言平起平坐的腳本語言。發布于2009年5月，由Ryan Dahl開發，實質是對Chrome V8引擎進行了封裝。*Node*對一些特殊用例進行優化，提供替代的API，使得V8在非瀏覽器環境下運行得更好。 2、 全局安裝vue和客戶端命令行工具集合vue-cli ~~~ npm install -g @vue/cli ~~~ ## 創建基于Webpack+Vue2的hello-vue項目 > 由于項目實踐中極少使用原生的Vue語法，所以教程不再介紹。Uni-app采用類似的Webpack+Vue架構， 所以本教程主要介紹Webpack+Vue架構的項目解構 創建項目 ``` $vue init webpack hello-vue ``` > hello-vue是創建的項目名稱，創建過程需要回答一系列的問題，全部選擇默認值和Yes ## 運行項目 首先安裝依賴的nodejs 模塊 ``` $cd hello-vue $npm install ``` 運行程序，啟動服務器，默認是打開8080端口 ``` $npm run dev ``` 執行在package.json中定義的腳本`dev` 也可以執行腳本 ``` $npm run dev ``` ``` "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "unit": "jest --config test/unit/jest.conf.js --coverage", "e2e": "node test/e2e/runner.js", "test": "npm run unit && npm run e2e", "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs", "build": "node build/build.js" }, ``` 生成的package.json文件 ``` { "name": "hello-vue", "version": "1.0.0", "description": "A Vue.js project", "author": "zengqs <pypzengqs@126.com>", "private": true, "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "unit": "jest --config test/unit/jest.conf.js --coverage", "e2e": "node test/e2e/runner.js", "test": "npm run unit && npm run e2e", "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs", "build": "node build/build.js" }, "dependencies": { "vue": "^2.5.2", "vue-router": "^3.0.1" }, "devDependencies": { "autoprefixer": "^7.1.2", "babel-core": "^6.22.1", "babel-eslint": "^8.2.1", "babel-helper-vue-jsx-merge-props": "^2.0.3", "babel-jest": "^21.0.2", "babel-loader": "^7.1.1", "babel-plugin-dynamic-import-node": "^1.2.0", "babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0", "babel-plugin-transform-runtime": "^6.22.0", "babel-plugin-transform-vue-jsx": "^3.5.0", "babel-preset-env": "^1.3.2", "babel-preset-stage-2": "^6.22.0", "babel-register": "^6.22.0", "chalk": "^2.0.1", "chromedriver": "^2.27.2", "copy-webpack-plugin": "^4.0.1", "cross-spawn": "^5.0.1", "css-loader": "^0.28.0", "eslint": "^4.15.0", "eslint-config-standard": "^10.2.1", "eslint-friendly-formatter": "^3.0.0", "eslint-loader": "^1.7.1", "eslint-plugin-import": "^2.7.0", "eslint-plugin-node": "^5.2.0", "eslint-plugin-promise": "^3.4.0", "eslint-plugin-standard": "^3.0.1", "eslint-plugin-vue": "^4.0.0", "extract-text-webpack-plugin": "^3.0.0", "file-loader": "^1.1.4", "friendly-errors-webpack-plugin": "^1.6.1", "html-webpack-plugin": "^2.30.1", "jest": "^22.0.4", "jest-serializer-vue": "^0.3.0", "nightwatch": "^0.9.12", "node-notifier": "^5.1.2", "optimize-css-assets-webpack-plugin": "^3.2.0", "ora": "^1.2.0", "portfinder": "^1.0.13", "postcss-import": "^11.0.0", "postcss-loader": "^2.0.8", "postcss-url": "^7.2.1", "rimraf": "^2.6.0", "selenium-server": "^3.0.1", "semver": "^5.3.0", "shelljs": "^0.7.6", "uglifyjs-webpack-plugin": "^1.1.1", "url-loader": "^0.5.8", "vue-jest": "^1.0.2", "vue-loader": "^13.3.0", "vue-style-loader": "^3.0.1", "vue-template-compiler": "^2.5.2", "webpack": "^3.6.0", "webpack-bundle-analyzer": "^2.9.0", "webpack-dev-server": "^2.9.1", "webpack-merge": "^4.1.0" }, "engines": { "node": ">= 6.0.0", "npm": ">= 3.0.0" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] } ``` ## 運行 ``` http://127.0.0.1:8080/#/ ``` ## 項目的目錄結構  ## 安裝Vue.js devtools工具調試Vuejs項目  ## 代碼分析 ### 定義組件component > 在Webpack+Vue模式下，所有的頁面都可以理解一個組件，以`.vue`后綴的文件 ``` src/component/HelloWorld.vue ``` ```html <template> <div> <h1>{{ msg }}</h1> </div> </template> <script> export default { name: "HelloWorld", data() { return { msg: "Welcome to Your Vue.js App" }; } }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1 { font-weight: normal; } </style> ``` ### 路由 路由定義文件 ``` /src/router/index.js ``` ```javascript import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld } ] }) ``` 通過import命令導入定義好的組件 ``` import HelloWorld from '@/components/HelloWorld' ``` 然后定義路由的路徑path，路由的名稱name和對應的組件component。 > 如果增加新的路由，可以加到routes數組中。 ### 測試 ``` http://127.0.0.1:8080/#/ ``` ## 單文件組件 .vue 文件是一個自定義的文件類型，用類 HTML 語法描述一個 Vue 組件。每個 .vue 文件包含三種類型的頂級語言塊`<template>`、`<script>` 和` <style>`。 ```html <template> </template> <script> </script> <style> </style> ``` * template語言塊用于編寫頁面的定義代碼 * script語言塊編寫頁面的模塊Javascript代碼 * style語言塊用于編寫樣式定義腳本 > 在?.vue 文件中，?template 中都是html 代碼，它定義了在頁面中顯示的內容，由于里面還有變量，也可以說定義了一個模版；script中都是js 代碼，它定義這個組件中所需要的數據和及其操作，style 里面是css 樣式，定義這個組件的樣式，scoped 表明這里寫的css 樣式只適用于該組件，可以限定樣式的作用域。 **script 標簽中?export defalut 后面的對象的理解** 在不使用.vue 單文件時，我們是通過?Vue 構造函數創建一個?Vue 根實例來啟動vuejs 項目，Vue 構造函數接受一個對象，這個對象有一些配置屬性?el, data, component, template 等，從而對整個應用提供支持。 ~~~ new Vue({ el: '#app', data: { msg: "hello Vue" } }) ~~~ 在.vue文件中，export default 后面的對象 就相當于?new Vue() 構造函數中的接受的對象，它們都是定義組件所需要的數據（data）, 以及操作數 據的方法等， 更為全面的一個?export default 對象，有methods, data, computed, 這時可以看到, 這個對象和new Vue() 構造函數中接受的對象是一模一樣的。但要注意data 的書寫方式不同。在 .vue 組件,?data 必須是一個函數，它return（返回一個對象），這個返回的對象的數據，供組件實現。 ## 添加一個組件 ### 定義組件 ``` /src/components/SayHi.vue ``` 代碼如下 ``` <template> <div> <input type="text" v-model="message" placeholder="消息"> <div class="message">{{ reversedMessage }}</div> </div> </template> <script> export default { data() { return { message: "Hello world!" }; }, computed: { reversedMessage: function() { // `this` 指向 vm 實例 return this.message .split("") .reverse() .join(""); } } }; </script> <style> .message { font-size: 20px; } </style> ``` ### 修改路由定義文件 ``` /src/router/index.js ``` ``` import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' //新增加的組件的導入 import SayHi from '@/components/SayHi' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '/say_hi', //新增組件的路由 name: 'SayHi', component: SayHi } ] }) ``` ### 測試 ``` http://127.0.0.1:8080/#/say_hi ```