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

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

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

利用在內存中生成與DOM與之對應的數據結構，這個結構稱之為虛擬DOM.當數據發生變化的時候，能智能地計算出重新渲染組件的最小代價并應用到DOM操作上

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

-g :代表全局安裝
這樣項目就創建好了，因為npm源是在國外，如果是要使用國內的鏡像：
淘寶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算是一個代碼語法規范檢查的工具，不同意就不會把檢查語法規范的功能加進webpack編譯的流程里
個人建議是選擇n 這樣避免了很多格式錯誤

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

在src路徑下

1.packagejson文件 packagejson文件是項目的配置文件，定義了項目的基本信息以及項目的相關包依賴，npm運行命令等，位于項目根目錄下。

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

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

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

然后在App.vue中進行引入
// 引入全部組件
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 相比較而言 會麻煩一點
首先安裝jquery
npm install --save jquery
然后在 webpack.dev.config.js 文件中，添加
// plugins 區塊內
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的全局引入的方法

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

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

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

嵌套路由不能寫成"/second"的形式 會被認為是從根目錄下引入
第三點是對于 meta的設置 因為是單頁面應用 所以切換時需要改變頁面的title keyword description

需要結合main.js中的router.beforeEach方法使用

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

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

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

最后項目運行
npm run dev
項目發布
npm run build

差不多這次需要記錄的就這么多，因為公司前端就我一個人，很多東西都是網上查以及問的人，感覺坑很多，很多也不是很熟悉，用到的都只是小部分，所以以后隨時補充。