6

近段时间常使用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:{})
})


星空
1.3k 声望15 粉丝