近段时候常运用vue-cli开辟，写点纪录，防止时候久之忘了。

环境

1. nodejs
　　vue-cli开辟基于nodejs环境，确保开辟的环境中已装置了nodejs。
　　装置教程 https://www.runoob.com/nodejs…
　　检察是不是已装置nodejs，在cmd中输入 node --version 若已装置则输出版本号。

2. vue
　　装置vue环境 npm install vue
　　装置vue-cli环境，npm install --global vue-cli

新建项目

1. 新建模板
　　新建一个projectname的项目 vue init webpack projectname
　　以后会涌现Project name和Project description之类的，可有可无，能够修正，也能够默许跳过。
　　是不是装置路由 ?Install vue-router?(Y/n) Y //看状况定，平常都有用到
　　初始化项目终了，依据提醒操纵，模块装置完后即可启动项目 npm run dev

2. 修正设置
　　装置的模板有些设置平常状况不符合本身须要，须要手动做些修正。
　　build文件夹utils.js文件中设置 publicPath: '../../' 处置惩罚图片途径找不到的题目
　　config文件夹的index.js文件build对象下的 assetsPublicPath: './' 处置惩罚打包后的项目页面空缺题目

3. 装置模块
　　运用模块合营开辟，如 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.js
    import Vuex from 'vuex'
    import Vue from 'vue'
    Vue.use(Vuex)
    //定义状况和暴露状况，如
    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/>'
    })

宣布vue组件到npm

1. 新建项目
　　运用cli疾速搭建一个项目，和新建一个一般的项目一样。假定项目为项目名 projectname

2. 开辟组件
　　新建一个行将宣布的组件vue文件，比如在components目录下新建componentname.vue

3. 修正设置文件

//修正package.json文件，如
{
  "name": "projectname", //宣布的包名，防止和已宣布的包名争执
  "version": "1.0.0", //版本号，当第二次宣布时需手动设置其版本
  "description": "A Vue.js project", //项目的形貌，可不写
  "author": "starrysky", //项目的作者
  "private": false, //开源，非私有
  "main": "dist/componentname.min.js", //打包的进口文件
  "repository": { //堆栈地点，可不写
    "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: [ //该部份删减内容
    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. 打包项目
　　进入项目终端，实行 npm run build
　　打包后将.gitignore文件的dist/删掉

5. 宣布模块
　　终端中登录npm，npm login
　　输入账号密码后，实行宣布 npm publish

6. 运用模块

//新项目中装置npm包，npm install --save-dev projectname
import componetName from 'projectname'

components:{
  componetName
}

遇到的题目

1. 启动效劳失利，非顺序语法题目，致使启动效劳打包毛病？
　　多是node_modules版本与本机装置的webpack版本不一致，删除，实行npm install从新下载一切依靠，偶然奇异的墙会致使装置失足，多试频频。

2. 开辟过程当中设置局域网可接见？
　　在config文件夹下的index.js中修正host字段值为本机在局域网中的ip。

3. 开辟过程当中跨域接见？

//在config文件夹下的index.js中修正proxyTable，如跨域接见 http:192.168.0.3:10010/api……
proxyTable: {
  '/api':{
   target: 'http:192.168.0.3:10010',
   chageOrigin: true,
   pathRewrite:{
     '^/api': '/api'
   }
  }
}

4. 项目打包后，页面显现空缺？
　　在config文件夹下的index.js中的build对象下设置 assetsPublicPath: './'

5. 项目打包后，图片途径加载毛病？
　　在build文件夹下的utils.js设置 publicPath: '../../'

6. 发出的要求编码失利?
　　存在特别字符致使编码失利，如%,对参数举行encodeURI编码，替代浏览器的自动编码。

7. class 继续报错 Class constructor xxx cannot be invoked without ‘new’ ?
　　多是文件途径题目。当class和继续的class不同时在src文件夹表里的话，会涌现该毛病。

8. 运用elementUI时发明el-input范例为number时，绑定的值为0不显现？
　　elementUI版本2.3.4的bug，更新npm包即可。

9. 怎样更新装置的npm包？

npm install -g npm-check-updates //装置高效晋级插件
ncu //列出一切可更新的模块
ncu -a //更新一切模块

10. npm包宣布失利，403无权限宣布?
　　多数原因是包名争执，在宣布之前先查找是不是已存在该模块

11. axios要求，怎样作废反复要求?

//axios要求拦截器中一致处置惩罚
let pending = []; //声明一个数组用于存储每一个要求的作废函数和标识
let cancelToken = axios.CancelToken;
let removePending = (config) => {
  let i = pending.findIndex(item => item.u === config.url+'&'+config.data);
  if(i > -1){ //实行作废操纵并从删除该条纪录
    pending[i].f();
    pending.splice(i, 1); 
  }
}

// http要求拦截器
axios.interceptors.request.use(config => {
  //一致get要乞降post要求，并将其格式化
  removePending(config);
  config.cancelToken = new cancelToken((c)=>{ 
    pending.push({ u: config.url + '&' + config.data, f: c }); 
  }); 
  return config
}, error => {
  return Promise.reject(error)
})

// http相应拦截器
axios.interceptors.response.use(data => {
  removePending(data.config);
  return data;
}, error => {
  return Promise.reject(data:{})
})