Vue工程化管理

基本vue介紹

vue的介紹：https://learning.dcloud.io/#/?vid=0
Vue (讀音 /vjuː/，類似於 view) 是一套用於構建用戶界面的漸進式框架。Vue.js是一個Js庫。
官網：http://cn.vuejs.org
手冊：http://cn.vuejs.org/api/
文檔：https://cn.vuejs.org/v2/guide/
當前最新版本：V2.6.10

vue的特點
特點：小巧
特點：簡單、易學
適合: 移動端項目,小巧
注意：不兼容低版本IE(8以下)

前端工程化管理

前端工程化是使用軟件工程的技術和方法來進行前端項目的開發、維護和管理
前端工程化使開發更高效，項目更規範。

1.前端工程化

代碼規範:
保證團隊所有成員以同樣的規範開發代碼。
分支管理:
不同的開發人員開發不同的功能或組件，按照統一的流程合併到主幹。
模塊管理:
團隊引用的模塊應該是規範的
保證這些模塊可以正確的加入到最終編譯好的包文件中。
自動化測試：
爲了保證和並進主幹的代碼達到質量標準，必須有測試，而且測試應該是自動化的，可以回
歸的。
構建：
主幹更新以後，自動將代碼編譯爲最終的目標格式，並且準備好各種靜態資源，
部署。
將構建好的代碼部署到生產環境。

2. vue項目工程化管理方案

webpack
vue-cli

3. webpack介紹

WebPack可以看做是模塊打包機：它做的事情是分析你的項目結構，找到JavaScript模塊以及其它的一
些瀏覽器不能直接運行的拓展語言（Scss，TypeScript，vue等），並將其打包爲合適的格式以供瀏覽
器使用。

關於webpack的一些思考
https://refined-x.com/2017/06/16/Webpack%E6%98%AF%E7%AD%94%E6%A1%88%E5%90%
97/
官網：
英文文檔：https://webpack.js.org/concepts/
中文文檔：https://www.webpackjs.com/concepts/
版本：
當前最新版本：v4.41.2

包管理工具

工具介紹

vue推薦開發環境
vue-cli: 用戶生成Vue工程模板。
Node.js: javascript運行環境(runtime)，不同系統直接運行各種編程語言。使用vue-cli 腳手架搭
建項目的時候需要nodejs
npm: Nodejs下的包管理器。
webpack: 它主要的用途是通過 CommonJS 的語法把所有瀏覽器端需要發佈的靜態資源做相應的
準備，比如資源的合併和打包。
工具包之間的關係
webpack能夠把.vue後綴名的文件打包成瀏覽器能夠識別的s，而這個.vue文件裝換需要打包器vue-
loader，這個vue-loader打包器是可以從npm上面下載（npm上面有很多資源包），npm下載文件之
後，webpack打包文件的時需要node環境去運行

工具安裝

安裝 node.js
從node.js官網下載並安裝node，安裝過程很簡單，一路“下一步”就可以了（傻瓜式安裝）。
安裝完成之後，打開命令行工具，輸入 node -v ，如果出現相應的版本號，則說明安裝成功。
node.js 安裝時，會一併安裝上npm包管理器
安裝 cnpm ：如果覺得npm太慢，可以考慮國內的cnpm
在命令行中輸入 npm install -g cnpm --registry=http://registry.npm.taobao.org 然後等
待。
完成之後，我們就可以用cnpm代替npm來安裝依賴包了。如果想進一步瞭解cnpm的，查看淘寶
npm鏡像官網。

工具的使用

官方文檔：https://www.npmjs.cn/
其他文檔：https://www.runoob.com/nodejs/nodejs-npm.html
cnpm: https://npm.taobao.org/
常用命令

# 當前項目安裝（安裝到當前目錄）
npm install express 
# 全局安裝
npm install express -g 
# 查看安裝信息
npm list
# 查看某個模塊的版本號
npm view grunt
# 卸載模塊
npm uninstall express
# 更新模塊
npm update express
# 搜索模塊
npm search express

cnpm 支持 npm 除了 publish 之外的所有命令

Vue實例

Vue的簡單使用

vue的部署：https://learning.dcloud.io/#/?vid=1
vue應用：https://learning.dcloud.io/#/?vid=2
官方文檔：https://cn.vuejs.org/v2/guide/installation.html

方法一：引用script
下載vue代碼或引用在線vue.js
1.vue的使用.html
方法二：使用工具腳手架搭建
較複雜，後面學習

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <!-- 加載好vue.js後，會加載一個Vue對象 -->
 </head>
 <body>
 <div id="app">
  <p>{{message}}</p>
 </div>
   <script>
   var data = {message: "Hello Vue!"};
     var app = new Vue({
      el: '#app',
      data: data
     })
     // app => 實例化一個Vue實例名叫
     // el  => 元素
     // data => 數據的值，需要是一個Ojbect(python中的字典類型)
   </script>
 </body>
</html>

vue的數據與方法

1). Vue數據的響應式
視頻：https://learning.dcloud.io/#/?vid=3
官方文檔：https://cn.vuejs.org/v2/guide/instance.html#%E5%88%9B%E5%BB%BA%E4%B8%
80%E4%B8%AA-Vue-%E5%AE%9E%E4%BE%8B

1.vue的使用.html

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <!-- 加載好vue.js後，會加載一個Vue對象 -->
 </head>
 <body>
 <div id="app">
  <h1>1. 響應式數據</h1>
<!-- “Mustache”語法 -->
  <p>1. {{message }}</p>
<p>2. {{message2 }}</p>
 </div>
   <script>
   var data = {message: "hello vue!"};
     var app = new Vue({
      el: '#app',
      data: data
     })
     // app => 實例化一個Vue實例名叫
     // el  => 元素
     // data => 數據的值，需要是一個Ojbect(python中的字典類型)
// 1. 響應式數據
data.message = "hello vue!";
app.message = "hello vue!";
app.message2 = "Vue2";
   </script>
 </body>
</html>

只有當實例被創建時中存在的屬性纔是響應式的。
如果使用 app.message2=“hello Vue2” ，此時的message2是非響應式的

2). 實例生命週期
視頻： https://learning.dcloud.io/#/?vid=4
文檔：https://cn.vuejs.org/v2/guide/instance.html#%E5%AE%9E%E4%BE%8B%E7%94%9F%
E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90
vue的生命週期.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
msg : "hi vue",
},
//在實例初始化之後，數據觀測 (data observer) 和 event/watcher 事件配置
之前被調用。
beforeCreate:function(){
console.log('beforeCreate');
},
/* 在實例創建完成後被立即調用。
在這一步，實例已完成以下的配置：數據觀測 (data observer)，屬性和方法的運
算，watch/event 事件回調。
然而，掛載階段還沒開始，$el 屬性目前不可見。 */
created :function(){
console.log('created');
},
//在掛載開始之前被調用：相關的渲染函數首次被調用
beforeMount : function(){
console.log('beforeMount');
},
//el 被新創建的 vm.$el 替換, 掛在成功
mounted : function(){
console.log('mounted');
},
//數據更新時調用
beforeUpdate : function(){
console.log('beforeUpdate');
},
//組件 DOM 已經更新, 組件更新完畢
updated : function(){
console.log('updated');
}
});
setTimeout(function(){
vm.msg = "change ......";
}, 3000);
</script>
</body>
</html>

vue-cli3+webpack管理項目

vue-cli3的安裝與創建

官方文檔：https://cli.vuejs.org/zh/guide/installation.html

1). 如果安裝有vue-cli 2.0 1.0 先卸載

npm uninstall vue-cli -g

2). 安裝vue-cli3

npm install -g @vue/cli

3). 查看是否安裝成功vue-cli3

vue --version

顯示安裝成功了, 版本號已經是3.2.1

vue-cli3創建項目

官方文檔： https://cli.vuejs.org/zh/guide/creating-a-project.html

# 方法一：創建項目並運行項目
vue create vuecli3-porj
"""
Please pick a preset: default (babel, eslint)
"""
cd vuecli3-porj
# 啓動項目
npm run serve
# 方法二：使用圖形化方式創建項目（打開一個web控制檯）
vue ui

一些概念

js版本：ECMAScript 是javascript語言的官方名稱。https://www.w3school.com.cn/js/js_versions.asp
babel: Babel 是一個 JavaScript 編譯器
主要用於在舊的瀏覽器或環境中將 ECMAScript 2015+ 代碼轉換爲向後兼容版本的
JavaScript 代碼
https://babel.docschina.org/docs/en/
eslint: SLint 是在 ECMAScript/JavaScript 代碼中識別和報告模式匹配的工具，它的目標是保
證代碼的一致性和避免錯誤。（風格和語法配置檢查工具）
http://eslint.cn/docs/user-guide/getting-started

vue-cli3的使用

vue-cli3+webpack目錄結構

項目運行與配置

入口配置文件： package.json
這是一個入口配置文件，配置內容包含以下部分：

項目基本信息：name, version, description, author, private 這些都是項目的基礎信息，
分別對應 vue create XXXX 所填寫的信息
啓動方式：scripts
- 這個就比較重要了。作用主要就是把 webpack 的原生命令代理一下（因爲需要配
  置很多參數，可能會很長，不便於閱讀），就像封裝函數一樣，變得簡潔一點，
  提高可讀性，也便於人的思維去理解。
- 當我們運行：npm run xxx時，會執行xxx這個key對應的命令
項目依賴：dependencies、devDenpencies
基本配置規則：eslintConfig、postcss…
默認配置：

{
"name": "vuecli3-porj",
"version": "0.1.0",
"private": true,
"scripts": {
 "serve": "vue-cli-service serve",
 "build": "vue-cli-service build",
 "lint": "vue-cli-service lint"
},
"dependencies": {
 "core-js": "^2.6.5",
 "vue": "^2.6.10"
},
"devDependencies": {
 "@vue/cli-plugin-babel": "^3.11.0",
 "@vue/cli-plugin-eslint": "^3.11.0",
 "@vue/cli-service": "^3.11.0",
 "babel-eslint": "^10.0.1",
 "eslint": "^5.16.0",
 "eslint-plugin-vue": "^5.0.0",
 "vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
 "root": true,
 "env": {
  "node": true
 },
 "extends": [
  "plugin:vue/essential",
  "eslint:recommended"
 ],
 "rules": {},
 "parserOptions": {
  "parser": "babel-eslint"
 }
全局cli配置： vue.config.js
vue.config.js 是一個可選的配置文件，如果項目的 (和 package.json 同級的) 根目錄中
存在這個文件，那麼它會被 @vue/cli-service 自動加載。你也可以使用 package.json
中的 vue 字段，但是注意這種寫法需要你嚴格遵照 JSON 的格式來寫。
配置文件詳細配置方式：https://cli.vuejs.org/zh/config/#vue-config-js
示例：
},
"postcss": {
 "plugins": {
  "autoprefixer": {}
 }
},
"browserslist": [
 "> 1%",
 "last 2 versions"
]
}

全局cli配置： vue.config.js
vue.config.js 是一個可選的配置文件，如果項目的 (和 package.json 同級的) 根目錄中
存在這個文件，那麼它會被 @vue/cli-service 自動加載。你也可以使用 package.json
中的 vue 字段，但是注意這種寫法需要你嚴格遵照 JSON 的格式來寫。
配置文件詳細配置方式：https://cli.vuejs.org/zh/config/#vue-config-js
示例：

module.exports = {
pages: {
index: {
// page 的入口
entry: 'src/main.js',
// 模板來源
template: 'public/index.html',
// 在 dist/index.html 的輸出
filename: 'index.html',
// 當使用 title 選項時，
// template 中的 title 標籤需要是 <title><%=
htmlWebpackPlugin.options.title %></title>
title: 'Index Page',
// 在這個頁面中包含的塊，默認情況下會包含
// 提取出來的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
// 當使用只有入口的字符串格式時，
// 模板會被推導爲 `public/subpage.html`
// 並且如果找不到的話，就回退到 `public/index.html`。
// 輸出文件名會被推導爲 `subpage.html`。
// subpage: 'src/subpage/main.js'
},
baseUrl: process.env.NODE_ENV === 'production' ? './' : '/',
devServer: {
port: 8383, // 端口號
host: 'localhost',
https: false, // https:{type:Boolean}
open: true, //配置自動啓動瀏覽器
// 配置一個後端數據接口(代理) -> 已處理跨域
// proxy: 'http://localhost:4000'
// 配置多個後端數據接口(代理) -> 已處理跨域
proxy: {
'/api': {
target: 'http://localhost:5000/',
vuecli插件與預設：https://cli.vuejs.org/zh/guide/plugins-and-presets.html
注意，以上配置都可參考webpack配置：https://www.webpackjs.com/concepts/
3). npm run serve的運行過程
vue-cli3會到項目的根目錄下尋找一個叫：package.json 的文件
在package.json文件中，配置了serve對應的執行指令vue-cli-service serve, 此時會調用工具運
行
項目會加載main.js，並運行項目
main.js加載的配置在@vue/cli-service這個開發環境依賴包中，如下：
node_modules -> @vue -> cli-service -> lib -> config -> base.js
擴展學習：
vue-cli系列之vue-cli-service整體架構淺析
vue-cli2: npm run dev啓動過程
vue-cli2: npm run dev啓動過程
Vue CLI 3是如何加載main.js
在Vue-cli中使用bootstrap：https://www.bbsmax.com/A/n2d9MVkvdD/
4. vue-cli2與vue-cli3的區別
Vue-Cli 是一個基於 Vue.js 進行快速開發的完整系統
由於webpack配置比較複雜，vue-cli3相較於原來的vue-cli2在配置上做了大量的簡化。
如果當前使用的是vue-cli2，想升級到vue-cli3，vue-cli3也是兼容了vue-cli2的配置方式。
ws: true,
changeOrigin: true
},
'/foo': {
target: 'http://localhost:5001/'
}
}, 
}
}

vuecli插件與預設：https://cli.vuejs.org/zh/guide/plugins-and-presets.html
注意，以上配置都可參考webpack配置：https://www.webpackjs.com/concepts/

npm run serve的運行過程

vue-cli3會到項目的根目錄下尋找一個叫：package.json 的文件
在package.json文件中，配置了serve對應的執行指令vue-cli-service serve, 此時會調用工具運
行
項目會加載main.js，並運行項目
main.js加載的配置在@vue/cli-service這個開發環境依賴包中，如下：
node_modules -> @vue -> cli-service -> lib -> config -> base.js

webpackConfig
  .mode('development')
  .context(api.service.context)
  .entry('app')
   .add('./src/main.js')  # 在這裏
   .end()
  .output
   .path(api.resolve(options.outputDir))
   .filename(isLegacyBundle ? '[name]-legacy.js' :
'[name].js')
   .publicPath(options.publicPath)

擴展學習：
vue-cli系列之vue-cli-service整體架構淺析
vue-cli2: npm run dev啓動過程
vue-cli2: npm run dev啓動過程
Vue CLI 3是如何加載main.js
在Vue-cli中使用bootstrap：https://www.bbsmax.com/A/n2d9MVkvdD/

vue-cli2與vue-cli3的區別

Vue-Cli 是一個基於 Vue.js 進行快速開發的完整系統
由於webpack配置比較複雜，vue-cli3相較於原來的vue-cli2在配置上做了大量的簡化。
如果當前使用的是vue-cli2，想升級到vue-cli3，vue-cli3也是兼容了vue-cli2的配置方式。

簡單來看一下區別：

1). 查看版本
vue -V 查看本地 vue 版本
2). 創建項目
vue-cli3.0：vue create 進入工程文件夾，創建項目。
vue-cli2.0：vue init webpack
3). 啓動項目
記得先安裝依賴：npm install

vue-cli3.0啓動：npm run serve
vue-cli2.0啓動：npm run dev

目錄結構

其他資料

webpack配置:
http://vuejs-templates.github.io/webpack/structure.html

Vue工程化管理

文章目錄