虽然vue-cli 4.x都快release了，但是该整理还是要整理……

需求项目标配：

  1. vue-router
  2. sass/scss
  3. 打包地址配置
  4. proxy table
  5. 正式环境关闭source map
  6. 支持全局引用scss（可以全局mixin）

环境声明：

  • 官方文档：https://cli.vuejs.org/zh/guide/installation.html

  • 简略版：

    • 如果想要使用vue-cli 3.x，那么

      • 安装（全局）：

        1. npm install -g @vue/cli
        2. # OR
        3. yarn global add @vue/cli

      • 卸载（全局）：

        1. npm uninstall vue-cli -g 
        2. # OR
        3. yarn global remove vue-cli

    • 如果想要使用vue-cli 1.x或者2.x，要使用vue-cli这个包名进行下载

  • 本文环境：@vue/cli 3.11.0

初始化项目

基础项目

  1. vue create vue-cli-demo
  1. 如果需要手动配置，则根据https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create 自行观看；这里使用默认配置(选择default)，eslint+babel

添加vue-router

  • 截止至19.12.05，还不支持通过vue add vue-router的方式导入vue-router，所以我们走原始的。
  • vue-cli 3.x项目默认使用yarn，所以后续安装也都使用yarn来进行。
  1. # download vue-router
  2. yarn add vue-router
  1. <!-- App.vue -->
  2. <!-- 动态加载页面 -->
  3. <template>
  4.       <div id="app">
  5.         <router-view/>
  6.     </div>
  7. </template>
  • 新建文件夹router以及内部文件main.js，使结构为：
  1. .
  2. ├── App.vue
  3. ├── assets
  4. │   └── logo.png
  5. ├── components
  6. │   └── HelloWorld.vue
  7. ├── main.js
  8. └── router
  9.     └── index.js
  1. // @/router/index.js
  2. import Vue from 'vue'
  3. import Router from 'vue-router'
  5. Vue.use(Router)
  7. // 项目惯用的懒加载
  8. const myComponents = {
  9.     HelloWorld: r => require.ensure([], () => r(require('@/components/HelloWorld')), 'com-hello-world')
  10. }
  12. export default new Router({
  13.     routes: [
  14.         {
  15.             path: '/hello',
  16.             name: 'HelloWorld',
  17.             component: myComponents.HelloWorld,
  18.             beforeEnter: function (to, from, next) {
  19.                 document.title = 'vue project'
  20.                 next()
  21.             }
  22.         },
  23.         {
  24.             path: '/*',
  25.             redirect: '/hello'
  26.         }
  27.     ]
  28. })
  1. import Vue from 'vue'
  2. import router from './router'
  3. import App from './App.vue'
  5. Vue.config.productionTip = false
  7. new Vue({
  8.   router,
  9.   render: h => h(App),
  10. }).$mount('#app')
  • 现在打开链接，就能通过/#/hello的哈希路由访问到了。
  • 后续如果需要增加页面，继续增加对应的组件即可。

添加sass/scss

  1. yarn add sass-loader
  2. # And
  3. yarn add node-sass

打包地址配置+关闭正式环境source map

新建vue.config.js在项目根目录，内容如：

  1. // vue.config.js
  2. module.exports = {
  3.     publicPath: '',
  4.     outputDir: 'dist', // 绝对路径的输出路径，打包的地址在这里
  5.     assetsDir: 'static',
  6.     lintOnSave: process.env.NODE_ENV === 'development', // Eslint只在开发环境有效
  7.     productionSourceMap: false, // 关闭正式环境的source map
  8.     devServer: {
  9.         proxy: '' // proxy可以是一个字符串(目标地址)，也可以是一个对象{'/foo': {target: '<other_url>'}}
  10.     }
  11. }

支持全局引用scss（可以全局mixin）

  1. // vue.config.js
  2. module.export = {
  3.     // 加项
  4.     css: {
  5.         loaderOptions: {
  6.             scss: {
  7.                 prependData: `@import '~@/assets/css/index.scss';`
  8.             }
  9.         }
  10.     }
  11. }