使用 vue-cli 搭建项目流程总结

1. vue-cli 是一个脚手架工具，为应用搭建基础的服务架构，提供 插件、开发服务、打包压缩、构建等功能

2. vue-cli 本质是诸多前端开发功能的集成，比如webpack、eslint、HRM、sass、less、路由、状态管理等

3. vue-cli 项目初始化流程

（1）新建vue-cli脚手架项目

（2）调整目录结构

src 下 新建 utils 文件夹：存放工具类库相关代码

src 下新建 service 文件夹：存放与后端联调接口相关的代码

src 下的 views 文件夹：存放路由对应的页面组件

src 下的 components 文件夹：页面中使用到的相关组件

src 下的 assets 文件夹下新建 images、styles等静态资源文件夹，存放相关文件

创建环境相关文件：

.env.development
.env.test
.env.sandbox
.env.production

环境相关通过 process.env.XX 获取

（3）辅助工具的引入

normalize.css：各个浏览器页面样式标准化

axios：自己配置axios拦截器，自己手动封装

nprogress：页面加载上方进度条，路由跳转、请求接口的时候使用

JSONplaceholder：假数据模拟，像 mock-easy 那种

vue-router：如果有需要的话，配置路由

拓展：配置路由的两种方式

1）最常用的配置

import Home from '@/views/Home.vue'
const pageData = window.pageData
const config = [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {
      title: `${pageData.serviceName}`,
      pv: {
        page_type: pageData.onlineTrack.detailPageType,
        page_name: pageData.onlineTrack.detailPageName
      }
    }
  }
]

export default config

2）使用 requireContext 方式

requireContext 是什么？

一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块

require.context函数接受三个参数

1. directory {String} -读取文件的路径

2. useSubdirectories {Boolean} -是否遍历文件的子目录

3. regExp {RegExp} -匹配文件的正则

使用： 

let requireContext = require.context('../../views', true, /\.vue$/)
requireContext.keys().forEach((filename) => {
  console.log(filename)
})

// 定义路由数组
let routes:Array<any> = []
// 使用 requireContext 匹配
let requireContext = require.context('../../views', true, /\.vue$/)
// 遍历生成路由数组
requireContext.keys().forEach((filename) => {
  const componentName = requireContext(filename).default.name
  routes.push({
    path: `/${componentName}`,
    name: componentName,
    meta: {
      title: componentName
    },
    component: () => import(`@/views/${componentName}.vue`)
  })
})
console.log('routes', routes)
export default routes

也可以使用这种方法去注册全局组件~

（4）vue.config.js 配置