摘要：其中定義了一些命令，還記得我們初始化項(xiàng)目完成后執(zhí)行其實(shí)就是執(zhí)行簡單的來說是運(yùn)行時(shí)依賴生產(chǎn)環(huán)境，是開發(fā)時(shí)的依賴開發(fā)環(huán)境相應(yīng)的在安裝包時(shí)，有兩種命令參數(shù)可以把它們的信息寫入文件，會把依賴包名稱添加到文件鍵下，則添加到文件鍵下。

它是漸進(jìn)的，沒有強(qiáng)主張，框架做分層設(shè)計(jì)，每層都可選，不同層可以靈活接入其他方案。你可以在原有大系統(tǒng)的上面，把一兩個(gè)組件改用它實(shí)現(xiàn)，當(dāng)jQuery用；也可以整個(gè)用它全家桶開發(fā)，當(dāng)Angular用；還可以用它的視圖，搭配你自己設(shè)計(jì)的整個(gè)下層用。你可以在底層數(shù)據(jù)邏輯的地方用OO和設(shè)計(jì)模式的那套理念，也可以函數(shù)式，都可以。
總的來說，它給你提供足夠的optional，但并不主張很多required。

1.響應(yīng)的數(shù)據(jù)綁定
數(shù)據(jù)變化=> 自動(dòng)更新視圖 利用Object.definedProperty中的 setter/getter代理數(shù)據(jù)，監(jiān)控對數(shù)據(jù)的操作
具體實(shí)現(xiàn)：把一個(gè)普通的js對象傳給vue實(shí)例的data選項(xiàng) vue將遍歷此對象所有的屬性，并使用Object.defineProperty 把這些屬性全部轉(zhuǎn)為getter/setter 。vue內(nèi)部會對數(shù)據(jù)進(jìn)行劫持操作，進(jìn)而追蹤依賴，在屬性被訪問和修改時(shí)，通知變化。
2.組合的視圖組件
根據(jù)UI頁面映射為組件樹，劃分不同的組件可維護(hù)，可重用，可測試

利用在內(nèi)存中生成與DOM與之對應(yīng)的數(shù)據(jù)結(jié)構(gòu)，這個(gè)結(jié)構(gòu)稱之為虛擬DOM.當(dāng)數(shù)據(jù)發(fā)生變化的時(shí)候，能智能地計(jì)算出重新渲染組件的最小代價(jià)并應(yīng)用到DOM操作上

全局安裝 vue-cli
npm install --global vue-cli
vue init webpack my-project
cd my-project
npm install
npm run dev

-g :代表全局安裝
這樣項(xiàng)目就創(chuàng)建好了，因?yàn)閚pm源是在國外，如果是要使用國內(nèi)的鏡像：
淘寶npm鏡像 搜索地址：http://npm.taobao.org/
registry地址：http://registry.npm.taobao.org/

使用cnmp

npm install -g cnpm --registry=https://registry.npm.taobao.org

//
其中需要注意的是 使用npm會需要先下載node.js

安裝過程中，會提示 是否使用eslint，eslint算是一個(gè)代碼語法規(guī)范檢查的工具，不同意就不會把檢查語法規(guī)范的功能加進(jìn)webpack編譯的流程里
個(gè)人建議是選擇n 這樣避免了很多格式錯(cuò)誤

自動(dòng)打開瀏覽器:只要在項(xiàng)目根目錄下找到package.json，然后打開該文件，在文件中的script腳本命令的dev行加入--open就可以了。如圖所示。然后重新啟動(dòng)項(xiàng)目就可以自動(dòng)打開瀏覽器了

在src路徑下

1.packagejson文件 packagejson文件是項(xiàng)目的配置文件，定義了項(xiàng)目的基本信息以及項(xiàng)目的相關(guān)包依賴，npm運(yùn)行命令等，位于項(xiàng)目根目錄下。

其中“scripts”定義了一些npm命令，還記得我們初始化項(xiàng)目完成后執(zhí)行npm run dev 其實(shí)就是執(zhí)行
webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

2.dependencies VS devDependencies
簡單的來說dependencies是運(yùn)行時(shí)依賴（生產(chǎn)環(huán)境），devDependencies是開發(fā)時(shí)的依賴（開發(fā)環(huán)境）
相應(yīng)的npm install 在安裝 npm 包時(shí)，有兩種命令參數(shù)可以把它們的信息寫入 package.json 文件，--save 會把依賴包名稱添加到 package.json 文件 dependencies 鍵下，--save-dev 則添加到 package.json 文件 devDependencies 鍵下。
舉個(gè)例子，比如我們項(xiàng)目要引用jQuery，因?yàn)閖Query部署到線上環(huán)境也要使用（生產(chǎn)環(huán)境），所以安裝jQuery的命令為npm install jQuery --save 這時(shí)候 dependencies 鍵下就會多了一個(gè)jQuery包
3.基礎(chǔ)配置文件
webpack.base.conf.js基礎(chǔ)的 webpack 配置文件主要根據(jù)模式定義了入口出口，以及處理 vue, babel 等的各種模塊，是最為基礎(chǔ)的部分。其他模式的配置文件以此為基礎(chǔ)通過 webpack-merge 合并。
4.main.js .src/main.js文件解讀 是webpack入口文件
5.asset文件夾下面的是靜態(tài)資源 img font等等
6.components文件夾下面是.vue的組件
7.router文件夾下面的是index.js設(shè)置路由
8.App.vue 所有自己寫的組件，都是在這個(gè)組件之上運(yùn)行了

1.首先 假設(shè)我們要使用的ui框架為mintui 那么參照mintui官方文檔
先是npm install mint-ui -S

然后在App.vue中進(jìn)行引入
// 引入全部組件
import Vue from "vue";
import Mint from "mint-ui";
Vue.use(Mint);

2.同理 可以看到注釋中寫著 使用Amazeui vue版本的引入方法
npm install amaze-vue --save

import Vue from "vue";

import AmazeVue from "amaze-vue";
import "amaze-vue/dist/amaze-vue.css";

Vue.use(AmazeVue);

3.第三中ui semantic-ui 相比較而言 會麻煩一點(diǎn)
首先安裝jquery
npm install --save jquery
然后在 webpack.dev.config.js 文件中，添加
// plugins 區(qū)塊內(nèi)
new webpack.ProvidePlugin({
$ : "jquery",
jQuery : "jquery",
"window.jQuery": "jquery",
"root.jQuery" : "jquery"
})
隨后安裝 semantic-ui-css
npm install semantic-ui-css --save
之后在 webpack.base.config.js 文件中添加，
resolve : {

extensions: ["", ".js", ".vue"],
fallback  : [path.join(__dirname, "../node_modules")],
alias     : {
  "vue"       : "vue/dist/vue.common.js",
  "src"       : path.resolve(__dirname, "../src"),
  "assets"    : path.resolve(__dirname, "../src/assets"),
  "components": path.resolve(__dirname, "../src/components"),
  // Semantic-UI
  "semantic"  : path.resolve(__dirname, "../node_modules/semantic-ui-css/semantic.min.js")
}

}
隨后在 webpack.dev.config.js 文件中，添加

plugins: [

new webpack.ProvidePlugin({
  $              : "jquery",
  jQuery         : "jquery",
  "window.jQuery": "jquery",
  "root.jQuery"  : "jquery",
  // Semantic-UI
  semantic     : "semantic-ui-css",
  Semantic     : "semantic-ui-css",
  "semantic-ui": "semantic-ui-css"
}),



最后在App.vue中引入
import semantic from "semantic"
import "../node_modules/semantic-ui-css/semantic.min.css"

同樣也可以從上面看出，jquery的全局引入的方法

對于項(xiàng)目中會公共使用到的頭部 尾部等文件可以統(tǒng)一在App.vue文件中引入

注意起名的時(shí)候不能寫成關(guān)鍵字 像footer等h5自帶的標(biāo)簽
從上圖中可以看出來 tabbar為公共文件而 router-view則為通過路由引入的組件
此外 因?yàn)榱?xí)慣了 使用scss 需要
npm install sass-loader node-sass style-loader --save-dev

從圖上可以看出 先是使用import把需要使用路由的組件引入 需要注意的就是 from 后面需要帶上"@/"
其次是關(guān)于嵌套路由的設(shè)置

嵌套路由不能寫成"/second"的形式 會被認(rèn)為是從根目錄下引入
第三點(diǎn)是對于 meta的設(shè)置 因?yàn)槭菃雾撁鎽?yīng)用 所以切換時(shí)需要改變頁面的title keyword description

需要結(jié)合main.js中的router.beforeEach方法使用

當(dāng)跨域無法請求的時(shí)候我們可以修改工程下config文件夾下的index.js中的dev:{}部分。

將target設(shè)置為我們需要訪問的域名，然后在main.js中設(shè)置全局屬性：Vue.prototype.HOST = "/api"
至此，我們就可以在全局使用這個(gè)域名了，如下：
var url = this.HOST + "/movie/in_theaters"

this.$http.get(url).then(res => {
  this.movieList = res.data.subjects;
},res => {
  console.info("調(diào)用失敗");
});

最后項(xiàng)目運(yùn)行
npm run dev
項(xiàng)目發(fā)布
npm run build

差不多這次需要記錄的就這么多，因?yàn)楣厩岸司臀乙粋€(gè)人，很多東西都是網(wǎng)上查以及問的人，感覺坑很多，很多也不是很熟悉，用到的都只是小部分，所以以后隨時(shí)補(bǔ)充。