vue-cli +webpack+vue-router 踩坑記

此次主要是記錄下本身在作vue-cli +webpack +vue-router 的經歷 以及一些踩過的坑，算是作一個簡單的總結

一.vue的基本介紹

1）漸進式的框架

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

2）vue中兩個核心點

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

3）虛擬DOM

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

二.項目初始化

1）vue官網上的步驟

全局安裝 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就能夠了。如圖所示。而後從新啓動項目就能夠自動打開瀏覽器了

2）項目結構

在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框架

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的全局引入的方法

2）項目中的公共文件

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

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

3）路由的設置

從圖上能夠看出 先是使用import把須要使用路由的組件引入 須要注意的就是 from 後面須要帶上'@/'
其次是關於嵌套路由的設置

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

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

4）跨域設置

當跨域沒法請求的時候咱們能夠修改工程下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

四.結尾

差很少此次須要記錄的就這麼多，由於公司前端就我一我的，不少東西都是網上查以及問的人，感受坑不少，不少也不是很熟悉，用到的都只是小部分，因此之後隨時補充。