使用vue ui创建、管理项目
- 安装vue-cli 3.0
npm install -g @vue/cli
# OR
yarn global add @vue/cli
检查vue-cli版本
vue --version
-
vue ui
image.png
如果不是这个页面，打开UI地址
http://localhost:8000/project/select
-
创建项目
image.png -
预设项目
默认配置项目只有babel和eslint两个插件，为了快速搭建项目，选择手动配置项目。如果在git仓库里已经有配置好的项目，直接选择第三个即可。
image.png -
添加功能
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会暴露给用户；
使用配置文件：环境配置等一些工具的使用，这个一定是要的。 -
配置
选择使用的css预处理语言和eslint配置标准，下面两个按钮一个是在保存时检查，一个是在向git提交时检查。
image.png
一整套流程下来也挺辛苦的，如果你需要将这一系列流程保存下来以便下次使用，在点击下一步后进行操作：
-
项目搭建成功
image.png
里面有一些刚刚咱们自己配置的一些东西
image.png
项目结构目录整理
目前整体的目录结构如图：
- node_modules：下载的依赖包
- public：公共的基础文件
- src：项目主体部分
- api：请求接口统一管控，当需要更改接口时能更快的找到
- assets：项目中所需引入资源的文件，font/img/js/...
- components：当有重复的组件时，提取出来，放在此文件夹
- config：存放一些配置文件
- directive：自定义指令文件
- lib：存放一些公用的方法
- mock：个人认为比较重要的文件，当前后端统一定义好接口时，mock可极大的提高开发效率，这也是最近讨论比较多的面向接口开发
- router：路由文件
- store：数据管控文件
- views：页面文件
- app.vue：vue入口文件
- main.js：项目主js文件
- .browserslistrc：指定了项目的目标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀
- .editorconfig：编辑器配置文件，需要vscode下载editorconfig for vs code插件使用
- .eslintrc.js：eslint配置文件
- .gitignore：上传到git时忽略的文件
- .babel.config.js：babel转义配置文件
- package-lock.json：锁定安装时的包的版本号，并且需要上传到git，以保证其他人在npm install时大家的依赖能保证一致
- package.json：项目依赖的部分
- postcss.config.js：postcss配置项
- REACME.md：项目的说明书
- 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>'
}
}
}
}
你的赞是我前进的动力
求赞，求评论，求转发...
