從18年7月16號入職到現(xiàn)在已經(jīng)5個月多了咖摹，入職之后就一直使用vue，來這邊溫習(xí)記錄下使用的步驟顽悼。在我的理解中vue其實每個組件都是有同一個根父組件app孝赫，這個app父組件是掛在html文件上的较木，頁面的轉(zhuǎn)換只是html文件里面組件的轉(zhuǎn)換，所以形成了靜態(tài)頁面青柄。如果有什么理解誤區(qū)伐债，望各位大佬可以指點出來，不勝感激致开。
項目創(chuàng)建使用等步驟
全局安裝vue腳手架vue-cli
npm install --global vue-cli
創(chuàng)建一個基于webpack 模板的新項目（切換路徑到創(chuàng)建的文件夾下）
vue init webpack myproject （myproject項目的名稱）
之后會出現(xiàn)創(chuàng)建項目一些選擇信息vue
Project name (項目名稱,不可以大寫)
Project description (項目描述)
Author (作者)
Vue build (vue創(chuàng)建的方式)
Install vue-router (是否安裝路由,vue的頁面內(nèi)容的變換基本都是路由的變化,這個是必須安裝的,也可以手動在項目里面安裝, npm i vue-router)
Use ESLint to lint your code (是否使用ESLint檢測你的代碼,是一種語法規(guī)則建議使用)
Pick an EESLint preset (選擇分支風(fēng)格,我一般都是選擇第一個：standard(https://github.com/feross/standard) js的標(biāo)準(zhǔn))
Set up unit tests (是否安裝單元測試,這個我也是默認(rèn)安裝的,但是基本沒有使用過峰锁，哈哈)
Pick a test runner (選擇一個單元測試運行器,這個也是同上哈~~)
Setup e2e tests with Nightwatch (是否安裝E2E測試框架NightWatch,E2E就是End to End,即消費端對產(chǎn)品端的商業(yè)模式)
Should we run 'npm install' for you after the project has been created? (在項目創(chuàng)建后，我們需要為您運行“NPM安裝”嗎双戳？有三個選項,我選擇的是第一個npm)
我基本上創(chuàng)建的時候一路回車到底虹蒋，全部默認(rèn)，感覺那個單元測試我可以省略不安裝~~~
創(chuàng)建完成之后使用WebStorm打開（我用的開發(fā)工具是webstorm）
打開之后的目錄結(jié)構(gòu)大概是這個樣子：
assets中一般存放靜態(tài)資源文件
components中存放些vue組件(我一般都是把導(dǎo)航欄、菜單欄魄衅、頁腳峭竣、路由主要顯示部分、和一些多處使用的組件放在里面)
router中有一個index.js文件晃虫，里面就是路由的注冊皆撩，先引入文件，然后注冊
const 組件名稱= resolve => require.ensure([], () => r(require('@/組件地址')), resolve)
{
????path:'/example', name:'example',
????meta: {
????????requireAuth: true;(這邊我基本上都是用來判斷這個路由是否需要登錄)
????},
????component:example
},
還有一種注冊方式哲银，路由的懶加載扛吞，不需要引入組件了 (這種方式還是比較不錯的雖然我用的比較少，畢竟項目文件不是很大荆责，比較推薦這種)
{
????path:'/example', name:'example',
????meta: {
????????requireAuth: true;(這邊我基本上都是用來判斷這個路由是否需要登錄)
????},
????component (resolve) {
????????require(['@/組件地址'], resolve)
????}
},
每次我都是會重新創(chuàng)建文件夾自定義我自己喜歡的目錄結(jié)構(gòu)：
assets文件夾里面添加了images(圖片資源),scss(scss樣式文件),temp(臨時文件,項目上線之前刪除)
components文件夾里面加了一個layout文件夾,我都是存放導(dǎo)航欄,頁腳,左側(cè)菜單欄,路有部分內(nèi)容
http只要是axios請求的文件配置封裝文件
util存放一些工具配置文件滥比，比如富文本(我一般也只用在這里了。草巡。守呜。)
variable是全部變量的統(tǒng)一處理的文件我把需要用到的全局變量全部封裝到這個文件夾下的js中了
views就是主要的路由組件了
結(jié)構(gòu)弄完了型酥，下面就需要做些配置了（main.js文件）
Element（https://element.faas.ele.me/#/zh-CN）
配合vue使用的頁面樣式我一般都是用的Element山憨，下面安裝Element（https://element.faas.ele.me/#/zh-CN）
npm i element-ui -S
安裝完成之后引入樣式和組件庫
import 'element-ui/lib/theme-chalk/index.css'
注冊
Vue.use(ElementUI)
router
如果創(chuàng)建項目的時候沒有安裝路由就需要安裝了
npm i vue-router
在創(chuàng)建vue實例的時候加上router
sass（https://www.sass.hk/）
之后在安裝一個sass，一個CSS擴展語言
安裝sass依賴包
npm install --save-dev sass-loader
npm install --save-dev node-sass
由于會使用sass的全局變量需要安裝一個依賴包
npm install --save-dev sass-resources-loader
在build文件夾下的webpack.base.conf.js的rules里面添加配置（這邊我沒有配置弥喉，也是ok的郁竟，不明所以）
{test:/\.sass$/, loaders: ['style','css','sass']}
在assets下的scss文件夾中新建index.scss文件（里面寫全局樣式）
在新建_variable.scss文件（全局變量,sass規(guī)定部分樣式引入文件名前面需要加下劃線）
在index.scss中引入_variable.scss
@import "variables";
我在gitHub上看到了一個頁面標(biāo)準(zhǔn)化文件，被我copy下來導(dǎo)入(https://github.com/necolas/normalize.css/blob/master/normalize.css)
_normalize.scss文件導(dǎo)入index.scss
@import "normalize";
在mian.js文件中引入scss全局樣式
import '@/assets/scss/index.scss'
由于樣式變量不可以在組件中直接使用由境，需要引包棚亩，覺得有點low，就查資料最后找到了方法
在build文件夾下的utils.js文件cssLoaders中加上這些代碼：
并且將下面的sass和scss替換掉：
全局變量
之后在搞一下全局變量虏杰，我一般用來存接口請求IP和端口號
在variable下創(chuàng)建index.js讥蟆，格式如下
export default{
? ? host: '',
}?
如果有其他的全局變量可以繼續(xù)往下寫
mian.js 引入
import Variablefrom './variable/index.js'
Vue.prototype.variable = Variable
Quill富文本（https://www.npmjs.com/package/vue-quill-editor）
如果需要使用富文本，我使用的是Quill
安裝依賴
npm install vue-quill-editor --save
在mian.js中引入纺阔，并且引入樣式
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
注冊
Vue.use(VueQuillEditor)
Quill是可以自定義配置的瘸彤，我是將配置文件放到了util文件中的然后在使用的頁面引入配置,因為它自帶的圖片上傳是base64，直接入庫的話笛钝，請求頭太長质况，導(dǎo)致網(wǎng)頁十分的卡，文件上傳的處理十分非常有必要的玻靡，下面是我在上一個項目中富文本的配置
下面的是圖片上傳處理
Distpicker地區(qū)插件（https://www.npmjs.com/package/v-distpicker）
下面是地區(qū)組件结榄，一般來說地區(qū)存在數(shù)據(jù)庫中，但是有些項目比較小所以會在前臺使用地區(qū)組件囤捻，我使用的是Distpicker
安裝
npm install v-distpicker --save
在mian.js中引入
import Distpicker from 'v-distpicker'
注冊
Vue.use(Distpicker)
Vue.component('v-distpicker', Distpicker)
axios （https://www.npmjs.com/package/axios）
接下來就是axios請求的封裝處理了
安裝
npm install? --save axios
在mian.js中引入
import axios 'axios' （axios不需要使用vue.use()臼朗，我也是不明所以然啊）
到這里我都會對axios進(jìn)行二次封裝
在http文件夾中新建api.js 文件
引入axios
import axios 'axios'?
對post，get請求進(jìn)行封裝
get請求:
postJson請求:
postForm請求:
文件請求:(這個其實不怎么用到Element有文件上傳的插件)
封裝完成了之后對它們進(jìn)行輸出（install 方法將被作為 Vue 的參數(shù)調(diào)用）：
在mian.js中引入并且注冊
import axiosApi from '@/http/api.js'
Vue.use(axiosApi)
axios有兩個攔截器請求攔截器，響應(yīng)攔截器可以進(jìn)行處理
響應(yīng)攔截器：
請求攔截器：（上個項目中使用的是token）
vuex （https://vuex.vuejs.org/）
由于之前的項目是使用的token我就使用了vuex
安裝
npm install vuex --save
在根目錄下面新建store文件夾视哑，再創(chuàng)建index.js文件
在index.js文件中引入
import Vuefrom 'vue'
import Vuexfrom 'vuex'
注冊 Vuex
Vue.use(Vuex)
大體如下:（期中兩個方法分別存和刪token）
在main.js中引入
import storefrom '../store'（vuex已經(jīng)在index.js文件中注冊過了老厌，所以不需要再注冊了）
再vue實例中加上store：
路由攔截
之前在路由注冊中有添加一個屬性
meta: {requireAuth: true}
用來判斷當(dāng)前路由是否需要登錄之后才可以訪問
接下來就要處理了
在main.js文件中下面添加一個路由跳轉(zhuǎn)攔截：router.beforeEach
因為之前項目使用的token如果頁面刷新了vuex里面的token會沒有了，這時候我們需要給他重新賦值
在router index.js里 路由注冊上面寫一個判斷：
其實token的存放一直是存放在session中的頁面刷新是不會被清除掉的黎炉，我第一次使用token的時候也是一臉懵逼枝秤，不是到如何下手，然后百度都被我用爛了慷嗜，他們都是用vuex存的淀弹，我不太清除為什么這樣存儲，可以直接從session中拿嗎庆械？又是一個不明所以然
IE兼容
但是我做過的項目都是需要兼容IE薇溃，因為Vue使用了ES6 Promise，IE瀏覽器是不支持的缭乘，所以需要用babel-polyfill轉(zhuǎn)換?
安裝
npm install --save-dev babel-polyfill
在build文件夾下webpack.config.js下的module.exports中添加：
Path問題
還有一個特別特別重要的問題沐序，項目放到服務(wù)器之前需要打包，打完包之后靜態(tài)文件路徑會有一些問題
在config文件夾下index.js文件中有兩個環(huán)境配置
build：（production 環(huán)境） dev:（dev環(huán)境）
我們放到服務(wù)器上之前都是需要build的堕绩，就是在production環(huán)境中的assetsPublicPath的配置是錯誤的需要改正策幼，想當(dāng)初我剛搞這個vue的時候搞了好久結(jié)果就在assetsPublicPath 斜杠前加一個點就ok了，好氣芭簟Ｌ亟恪！Ｊ虻唐含！
基本上就是這些了，如果我走進(jìn)了什么誤區(qū)沫浆，望有大佬可以指出捷枯，不勝感激！
