近段時(shí)間常使用vue-cli開(kāi)發(fā)，寫點(diǎn)記錄，避免時(shí)間久之忘了。

環(huán)境

1. nodejs
　　vue-cli開(kāi)發(fā)基于nodejs環(huán)境，確保開(kāi)發(fā)的環(huán)境中已安裝了nodejs。
　　安裝教程 https://www.runoob.com/nodejs...
　　查看是否已安裝nodejs，在cmd中輸入 node --version 若已安裝則輸出版本號(hào)。

2. vue
　　安裝vue環(huán)境 npm install vue
　　安裝vue-cli環(huán)境，npm install --global vue-cli

新建項(xiàng)目

1. 新建模板
　　新建一個(gè)projectname的項(xiàng)目 vue init webpack projectname
　　之后會(huì)出現(xiàn)Project name和Project description之類的，無(wú)關(guān)緊要，可以修改，也可以默認(rèn)跳過(guò)。
　　是否安裝路由 ?Install vue-router?(Y/n) Y //看情況定，一般都有用到
　　初始化項(xiàng)目完畢，根據(jù)提示操作，模塊安裝完后即可啟動(dòng)項(xiàng)目 npm run dev

2. 修改配置
　　安裝的模板有些配置一般情況不符合自己需要，需要手動(dòng)做些修改。
　　build文件夾utils.js文件中設(shè)置 publicPath: '../../' 解決圖片路徑找不到的問(wèn)題
　　config文件夾的index.js文件build對(duì)象下的 assetsPublicPath: './' 解決打包后的項(xiàng)目頁(yè)面空白問(wèn)題

3. 安裝模塊
　　使用模塊配合開(kāi)發(fā)，如 Vue + Vuex + elementUI + axios + font-awesome + scss

• Scss

　　安裝 Scss，使用方式 <style scoped lang="scss">
　　npm install node-sass --save-dev
　　npm install sass-loader --save-dev
　　安裝 font-awesome，使用方式 <i class="fa fa-coffee"></i>
　　npm install font-awesome --save main.js中引入 import 'font-awesome/css/font-awesome.css'
　　

• elementUI

　　安裝 elementUI，使用方式 <el-switch v-model="value"></el-switch>
　　npm i element-ui -S
　　在main.js中引入
　　import Element from 'element-ui'
　　import 'element-ui/lib/theme-chalk/index.css'
　　Vue.use(Element, {size: 'small'})

• axios

　　安裝axios，使用方式 this.$http(method:'post', url:'/webApi', data:{}).then(res=>{……});
　　npm install axios -S
　　在main.js中引入
　　import axios from 'axios'
　　Vue.prototype.$http = axios

• Vuex

　　安裝Vuex，使用方式 this.$store.commit('setMsg','message');
　　npm install vuex -S
　　在src中新建文件夾vuex，在vuex文件夾中新建store.js，如

//store.jsimport Vuex from 'vuex'import Vue from 'vue'Vue.use(Vuex)//定義狀態(tài)和暴露狀態(tài)，如const store = new Vuex.Store({state: {msg: 'message',},mutations: {setMsg(state, val) {state.msg = val}, }})export default store//main.js中引入import store from './vuex/store.js'new Vue({el: '#app',router,store,components: { App },template: '<App/>'})

發(fā)布vue組件到npm

1. 新建項(xiàng)目
　　使用cli快速搭建一個(gè)項(xiàng)目，和新建一個(gè)普通的項(xiàng)目一樣。假定項(xiàng)目為項(xiàng)目名 projectname

2. 開(kāi)發(fā)組件
　　新建一個(gè)即將發(fā)布的組件vue文件，比如在components目錄下新建componentname.vue

3. 修改配置文件

//修改package.json文件，如 {"name": "projectname", //發(fā)布的包名，避免和已發(fā)布的包名沖突"version": "1.0.0", //版本號(hào)，當(dāng)?shù)诙伟l(fā)布時(shí)需手動(dòng)設(shè)置其版本"description": "A Vue.js project", //項(xiàng)目的描述，可不寫"author": "starrysky", //項(xiàng)目的作者"private": false, //開(kāi)源，非私有"main": "dist/componentname.min.js", //打包的入口文件"repository": { //倉(cāng)庫(kù)地址，可不寫"type": "git","url": ""}, }//修改build文件夾中的webpack-prod.conf.js，如output: { //該部分為重寫path: config.build.assetsRoot,publicPath: config.build.assetsPublicPath,filename: 'componentname.min.js',library: 'componentname',libraryTarget: 'umd'},plugins: [ //該部分刪減內(nèi)容new webpack.DefinePlugin({'process.env': env}),new UglifyJsPlugin({uglifyOptions: {compress: {warnings: false}},sourceMap: config.build.productionSourceMap,parallel: true}),new ExtractTextPlugin({filename: utils.assetsPath('css/[name].[contenthash].css'),allChunks: true,}),new OptimizeCSSPlugin(),]//修改config文件夾下index.js的build字段中的 assetsSubDirectory: '/' //修改main.js文件 import componentname from '@/components/componentname.vue', export default componentname

4. 打包項(xiàng)目
　　進(jìn)入項(xiàng)目終端，執(zhí)行 npm run build
　　打包后將.gitignore文件的dist/刪掉

5. 發(fā)布模塊
　　終端中登錄npm，npm login
　　輸入賬號(hào)密碼后，執(zhí)行發(fā)布 npm publish

6. 使用模塊

//新項(xiàng)目中安裝npm包，npm install --save-dev projectname import componetName from 'projectname'components:{componetName }

碰到的問(wèn)題

1. 啟動(dòng)服務(wù)失敗，非程序語(yǔ)法問(wèn)題，導(dǎo)致啟動(dòng)服務(wù)打包錯(cuò)誤？
　　可能是node_modules版本與本機(jī)安裝的webpack版本不一致，刪除，執(zhí)行npm install重新下載所有依賴，偶爾神奇的墻會(huì)導(dǎo)致安裝出錯(cuò)，多試幾次。

2. 開(kāi)發(fā)過(guò)程中設(shè)置局域網(wǎng)可訪問(wèn)？
　　在config文件夾下的index.js中修改host字段值為本機(jī)在局域網(wǎng)中的ip。

3. 開(kāi)發(fā)過(guò)程中跨域訪問(wèn)？

//在config文件夾下的index.js中修改proxyTable，如跨域訪問(wèn) http:192.168.0.3:10010/api…… proxyTable: {'/api':{target: 'http:192.168.0.3:10010',chageOrigin: true,pathRewrite:{'^/api': '/api'}} }

4. 項(xiàng)目打包后，頁(yè)面顯示空白？
　　在config文件夾下的index.js中的build對(duì)象下設(shè)置 assetsPublicPath: './'

5. 項(xiàng)目打包后，圖片路徑加載錯(cuò)誤？
　　在build文件夾下的utils.js設(shè)置 publicPath: '../../'

6. 發(fā)出的請(qǐng)求編碼失敗?
　　存在特殊字符導(dǎo)致編碼失敗，如%,對(duì)參數(shù)進(jìn)行encodeURI編碼，替換瀏覽器的自動(dòng)編碼。

7. class 繼承報(bào)錯(cuò) Class constructor xxx cannot be invoked without 'new' ?
　　可能是文件路徑問(wèn)題。當(dāng)class和繼承的class不同時(shí)在src文件夾內(nèi)外的話，會(huì)出現(xiàn)該錯(cuò)誤。

8. 使用elementUI時(shí)發(fā)現(xiàn)el-input類型為number時(shí)，綁定的值為0不顯示？
　　elementUI版本2.3.4的bug，更新npm包即可。

9. 如何更新安裝的npm包？

npm install -g npm-check-updates //安裝高效升級(jí)插件 ncu //列出所有可更新的模塊 ncu -a //更新所有模塊

10. npm包發(fā)布失敗，403無(wú)權(quán)限發(fā)布?
　　多半原因是包名沖突，在發(fā)布之前先查找是否已存在該模塊

11. axios請(qǐng)求，如何取消重復(fù)請(qǐng)求?

//axios請(qǐng)求攔截器中統(tǒng)一處理 let pending = []; //聲明一個(gè)數(shù)組用于存儲(chǔ)每個(gè)請(qǐng)求的取消函數(shù)和標(biāo)識(shí) let cancelToken = axios.CancelToken; let removePending = (config) => {let i = pending.findIndex(item => item.u === config.url+'&'+config.data);if(i > -1){ //執(zhí)行取消操作并從刪除該條記錄pending[i].f();pending.splice(i, 1); } }// http請(qǐng)求攔截器 axios.interceptors.request.use(config => {//統(tǒng)一get請(qǐng)求和post請(qǐng)求，并將其格式化removePending(config);config.cancelToken = new cancelToken((c)=>{ pending.push({ u: config.url + '&' + config.data, f: c }); }); return config }, error => {return Promise.reject(error) })// http響應(yīng)攔截器 axios.interceptors.response.use(data => {removePending(data.config);return data; }, error => {return Promise.reject(data:{}) })

總結(jié)

以上是生活随笔為你收集整理的Vue入坑笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。