vuecli3.0.0

对比vue-cli@v2

3.0代码结构更加简洁。文档链接

亮点🌟

1. 拥有可视化操作界面 ，执行命令vue ui可见

注意事项⚠️

1. 安装3.0之前先卸载2.0

npm uninstall vue-cli -g
npm install @vue/cli -g

//注意点：
安装前保证node版本大于v8.10， npm版本大于 v5.6
使用nvm i升级node
npm i npm -g升级npm 版本
//如果还是安装失败，考虑清除缓存
npm cache clean --force

2. 执行npm shrinkwrap命令，生成npm-shrinkwrap.json文件保证在所有环境下安装得到稳定的结果

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

//build之后预览，最简单的方式： 使用nodejs的静态资源服务
npm install serve -g
//-s标示但页面应用，自动查找dist目录下的index.html文件并通过http模式打开
serve -s dist  

Run your unit tests

npm run test:unit

定义公共scss文件并生效

需要在vue.config.js中配置css.loaderOptions项

//参考文档 https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders
//vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        data: `@import "@/styles/index.scss";`
      }
    }
  }
}

h5 hash路由#变更

export default new Router({
  mode:'history',  //没有#  需要后端配合设置 =》 如果路由跟router.js不匹配，则默认访问index.html页面。
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
})

proxy代理配置

//vue.config.js
devServer: {  //配置proxy代理
  proxy:{
    '/mobile': {
      target: 'http://cdd.mh.bangxue100.com/mobile',
      // ws: true/false,  //if you want to proxy websockets
      changeOrigin: true,
      // pathRewrite: {
      //   '^/mobile':''
      // }
    }
  }
}