使用vue ui创建、管理项目

1. 安装vue-cli 3.0

npm install -g @vue/cli
# OR
yarn global add @vue/cli

检查vue-cli版本

vue --version

2. vue ui

   
   image.png

如果不是这个页面，打开UI地址
http://localhost:8000/project/select

3. 创建项目

   
   image.png

4. 预设项目
   默认配置项目只有babel和eslint两个插件，为了快速搭建项目，选择手动配置项目。如果在git仓库里已经有配置好的项目，直接选择第三个即可。

   
   image.png

5. 添加功能

   
   image.png
   

   babel：JavaScript的转换工具，可以将项目中的es6/7/8等转为es5使用，避免浏览器的不兼容；
   typescript：使JavaScript趋向于强类型的一种语言，学习过java的同学应该很快就能看懂里面的语法结构；
   PWA：PWA（Progressive web apps，渐进式 Web 应用）运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序，号称“小程序的老祖宗”，遗憾的是没火起来；
   Router：路由管理工具，vue开发的单页面应用，需要前端路由的支持；
   Vuex：状态管理工具，用来处理vue项目中的数据流，当有部分数据需要共享时，使用vuex的单向数据流能更好的管理数据；
   CSS Pre-processors：css预处理语言，项目中一般都会使用less/sass/stylus，此插件可以将预处理语言进行转换；
   Linter/Formatter：代码规范管理工具，能使团队项目中的代码风格更相似；
   Unit Testing：单元测试，有Jest和Mocha，使用Jest的可能更多，目前使用不到；
   E2E Testing：端到端测试，它用来测试一个应用从头到尾的流程是否和设计时候所想的一样。简而言之，它从一个用户的角度出发，认为整个系统都是一个黑箱，只有UI会暴露给用户；
   使用配置文件：环境配置等一些工具的使用，这个一定是要的。

6. 配置
   选择使用的css预处理语言和eslint配置标准，下面两个按钮一个是在保存时检查，一个是在向git提交时检查。

   
   image.png

一整套流程下来也挺辛苦的，如果你需要将这一系列流程保存下来以便下次使用，在点击下一步后进行操作：

image.png

7. 项目搭建成功

   
   image.png
   

   里面有一些刚刚咱们自己配置的一些东西

   
   image.png

项目结构目录整理

image.png

目前整体的目录结构如图：

1. node_modules：下载的依赖包
2. public：公共的基础文件
3. src：项目主体部分

• api：请求接口统一管控，当需要更改接口时能更快的找到
• assets：项目中所需引入资源的文件，font/img/js/...
• components：当有重复的组件时，提取出来，放在此文件夹
• config：存放一些配置文件
• directive：自定义指令文件
• lib：存放一些公用的方法
• mock：个人认为比较重要的文件，当前后端统一定义好接口时，mock可极大的提高开发效率，这也是最近讨论比较多的面向接口开发
• router：路由文件
• store：数据管控文件
• views：页面文件
• app.vue：vue入口文件
• main.js：项目主js文件

4. .browserslistrc：指定了项目的目标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀
5. .editorconfig：编辑器配置文件，需要vscode下载editorconfig for vs code插件使用
6. .eslintrc.js：eslint配置文件
7. .gitignore：上传到git时忽略的文件
8. .babel.config.js：babel转义配置文件
9. package-lock.json：锁定安装时的包的版本号，并且需要上传到git，以保证其他人在npm install时大家的依赖能保证一致
10. package.json：项目依赖的部分
11. postcss.config.js：postcss配置项
12. REACME.md：项目的说明书
13. vue.config.js：项目的主要配置文件

基本配置讲解

vue-cli3的主要配置放在vue.config.js文件中

const path = require('path')

const resolve = dir => path.join(__dirname, dir)

const BASE_URL = process.env.NODE_ENV === 'production' ? '/pro/' : '/'

module.exports = {
  lintOnSave: false,
  baseUrl: BASE_URL,
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('_c', resolve('src/components'))
  },
  productionSourceMap: false, // 打包时不生成.map文件
  devServer: {
    proxy: 'http://localhost:8080'
  }
}

跨域配置

简单的跨域：

devServer: {
    proxy: 'http://localhost:8080'
  }

如果你想要更多的代理控制行为，也可以使用一个 path: options 成对的对象。完整的选项可以查阅 http-proxy-middleware

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }
}