Vue项目入门教程3-项目改造

系列文章：

• Vue项目入门教程1-项目介绍
• Vue项目入门教程2-Vue-cli搭建项目
• Vue项目入门教程3-项目改造
• Vue项目入门教程4-插件安装
• Vue项目入门教程5-Svg图标
• Vue项目入门教程6-数据mock
• Vue项目入门教程7-首页布局
• Vue项目入门教程8-首页数据
• Vue项目入门教程9-文章详情页
• Vue项目入门教程10-搜索页面
• Vue项目入门教程11-我的页面及其他
• Vue项目入门教程12-打包发布

规划src目录

规划下src/目录下的目录结构，修改如下

添加常用目录别名

修改build/webpack.base.conf.js文件
找到下面这段代码

resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src'),
  }
},

修改为

resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src'),
    'api': resolve('src/api'),
    'assets': resolve('src/assets'),
    'components': resolve('src/components'),
    'config': resolve('src/config'),
    'utils': resolve('src/utils'),
    'views': resolve('src/views'),
  }
},

修改主页

• 在src/views/目录下新建文件index.vue

<template>
  <div>index</div>
</template>

• 修改src/router/index.js文件

import HelloWorld from '@/views/index'

• 删除文件src/components/HelloWorld.vue

删除多余的文件和代码

• 修改src/App.vue文件

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

• 删除src/assets/logo.png文件

修改路由

路由文件放置在src/router/index.js文件中

• 新建文件routes.js文件，用来专门方式路由地址和组件的映射关系。
  index.js文件只用来保存路由插件配置相关

• 在src/router/目录下新建文件routes.js

// src/router/routes.js
const Index = res => require(['@/views/index'], res)

const routes = [
  {
    path: '/',
    name: 'index',
    component: Index
  }
]

export default routes

• 修改src/router/index.js文件

import Vue from 'vue'
import Router from 'vue-router'
import routes from './routes'

Vue.use(Router)

export default new Router({
  // mode: 'history',
  routes
})

Eslint配置

在函数名和括号中间，我习惯不留空格，修改下Eslint的配置文件
其他配置根据需求自己配置配置即可

• 修改.eslintrc.js文件，在rules下添加代码

rules: {
  // ...
  'space-before-function-paren': 0
}

多环境配置

用vue-cli生成的项目，只有开发环境development和正式环境production
开发时常常会用到其他环境，比如线上测试环境、预发布环境等

现在我们将环境分为开发环境dev、测试环境sit和正式环境prod

• 修改package.json文件，修改scripts下面的build，拆分成两个

"scripts": {
  // ...
  "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
  "build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js"
},

• 在config/目录下添加文件sit.env.js

// config/sit.env.js
'use strict'
module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG: '"sit"'
}

• 修改config/prod.env.js文件，添加ENV_CONFIG配置

// config/prod.env.js
'use strict'
module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG: '"prod"'
}

• 修改build/build.js文件

const spinner = ora('building for production...')

修改为

const spinner = ora('building for ' + process.env.env_config + ' production...')

• 修改build/webpack.prod.conf.js文件

const env = require('../config/prod.env')

修改为

const env = require('../config/' + process.env.env_config + '.env')

修改后就没有npm run build这个命令了

• 打包测试环境：npm run build:sit
• 打包正式环境：npm run build:prod

备注：
运行命令是如果出现'cross-env' 不是内部或外部命令，也不是可运行的程序或批处理文件。
安装cross-env：npm i cross-env --save-dev