使用vue2结构及配置管理
一、vue-cli2和vue-cli3的区别
-
vue-cli3 是基于webpack4的, vue-cli2是基于webpack3
-
vue-cli3的设计原则是"0配置", 移除了配置文件根目录下build和config等目录
-
vue-cli3 提供了vue ui命令, 进行可视化配置, 操作更方便
-
替换了static文件夹为public文件夹, 并且index.html移动到public文件夹中
二、使用vue-cli2脚手架搭建项目
2.1 安装环境
-
全局安装node环境,检查node版本
-
npm
-
源: 外网源 淘宝镜像源
-
-
全局安装vue-cli脚手架
-
创建项目
vue create efficient // efficient 项目名称
Vue CLI v5.0.8 // # vue-cli脚手架的版本 ? Please pick a preset: (Use arrow keys) // 请选择一个配置 ❯ Default ([Vue 3] babel, eslint) // 默认配置,vue的版本是3.0, 默认安装了es6转es5,eslint代码格式化工具 Default ([Vue 2] babel, eslint) // 默认配置,vue的版本是2.0, 默认安装了es6转es5,eslint代码格式化工具 Manually select features // 手动选择,我们需要指定哪些插件安装,哪些不安装, 就可以选择手动
这里由于默认模板没有啥展示的必要所以我们便选择手动配置。
-
选择手动配置后,进行项目选项配置
Vue CLI v5.0.8 ? Please pick a preset: Manually select features //请选择项目配置 ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed) // 选择你需要的配置放在项目里面,可以选择一个,也可以选择全部,按enter键结束 ❯◉ Babel // 转换工具,将es6转换成es5 ◯ TypeScript // JavaScript的一个超集(添加了可选的静态类型和基于类的面向对象编程:类型批注和编译时类型检查、类、接口、模块、lambda 函数) ◯ Progressive Web App (PWA) Support // 渐进式Web应用程序 ◯ Router // vue-router(vue路由) ◯ Vuex // vuex(vue的状态管理模式) ◯ CSS Pre-processors // CSS 预处理器(如:less、sass) ◉ Linter / Formatter // 代码风格检查和格式化(如:ESlint) ◯ Unit Testing // 单元测试(unit tests ◯ E2E Testing // e2e(end to end) 测试
(1) 对于pwa的解释
一是给项目添加一些webapp支持,比如在手机端支持发送到桌面图标,根据不同平台和浏览器尝试去掉浏览器自带的地址栏、底栏实现全屏体验,这个主要是视觉上和体验上的,没有什么实际功能。 实现方式就是勾选pwa支持后项目会生成manifest.json,在里面配置即可 二是增加可离线支持。其实可离线也不一定非要用pwa,有不少其他手段。可离线就是比如你的项目不是一定要全程联网才能实现功能,只要用户访问过一次你的网站,下一次进入时哪怕没有网络,你的项目也不会白屏,而是照常运行或者开放部分功能,或者给个断网提示等等。对于那些功能性网站挺有用的,举例来说什么在线计算器,在线算税小工具等。 通过配置项目生成的registerServiceWorker.js来注册serviceworker实现,具体操作还是很复杂的,详情百度. Progressive Web App, 简称 PWA,是提升 Web App 的体验的一种新方法,能给用户原生应用的体验。PWA 能做到原生应用的体验不是靠特指某一项技术,而是经过应用一些新技术进行改进,在安全、性能和体验三个方面都有很大提升,PWA 本质上是 Web App,借助一些新技术也具备了 Native App 的一些特性,兼具 Web App 和 Native App 的优点。PWA 的主要特点包括下面三点:可靠 - 即使在不稳定的网络环境下,也能瞬间加载并展现体验 - 快速响应,并且有平滑的动画响应用户的操作粘性 - 像设备上的原生应用,具有沉浸式的用户体验,用户可以添加到桌面PWA 本身强调渐进式,并不要求一次性达到安全、性能和体验上的所有要求,开发者可以通过 PWA Checklist 查看现有的特征。 搜索链接: https://juejin.cn/post/6844904033522548743
(2) 对于单元测试的理解
那些需要写单元测试,那些不需要写,取决于代码对数据的处理,当数据处理的复杂性较高的时候,需要用到单元测试,只有页面展示,并不需要单元测试
(3)E2E单元测试
E2E 端到端测试学习 - E2E 介绍、Cypress 案例基本使用_e2e测试-CSDN博客
(4).scss预处理【转】前端的css preprocessor - 简书
-
选择vue的版本
? Choose a version of Vue.js that you want to start the project with 3.x ❯ 2.x // 选择一个vue的版本
-
使用hash还是hitory路由
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)N // 选择hash路由
-
选择css预处理的方式
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) // css预处理器 这里选择第一个Sass/SCSS (with dart-sass) ❯ Sass/SCSS (with dart-sass) Less Stylus
-
语法检测工具
? Pick a linter / formatter config: (Use arrow keys) // 语法检测工具 ❯ ESLint with error prevention only // 仅错误预防 ESLint + Airbnb config // config Airbnb配置 ESLint + Standard config // config 标准配置 ESLint + Prettier // 该配置应该比较完善
-
语法检测方式
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed ❯◉ Lint and fix on commit // 代码除了语法错误导致的 error 外不会提示 warning。而是在当前项目进行 git commit 操作的时候,通过 githook,在 pre-commit 阶段执行 lint 和 fix 操作,自动帮我们把有语法错误的地方修改为符合规范。 ◯ Lint on save // 代码文件中有代码不符合 lint 规则时,会在 compile 阶段提示 warning。如果出现了语法错误,会直接在页面上显示 error
-
Where do you prefer placing config for Babel, ESLint, etc.?配置文件放在那里呢?
Where do you prefer placing config for Babel, ESLint, etc.?配置文件放在那里呢? In dedicated config files //:独立文件 In package.json //: 放到package.json中 通常我们都选择独立的配置文件, 方便管理
-
Save this as a preset for future projects? (y/N) 是否将刚刚的配置保存到项目中?
Save this as a preset for future projects? (y/N) N
如果选择是: 下次在配置选项的时候, 除了default,manually,还会多一个我们保存的项目配置.
-
Y: 如果以后搭建项目都希望是这个配置就选择y
-
N: 不希望保存配置 下次在创建项目的时候, 我们就可以自动选择之前保存的项目特征
如果我们设置了很多自定义配置,如何取消呢?
在/Users/用户名/.vuerc, 修改这个文件
{ "useTaobaoRegistry": false, "presets": { "mySet": { "useConfigFiles": true, "plugins": { "@vue/cli-plugin-babel": {} }, "vueVersion": "2" } } }
里面有个选项是presets. 下面就是我们保存的设置.设置名称是mySet.这个配置只安装一个插件:@vue/cli-plugin-babel
-
三、下面我们来看一下vue-cli3项目中各个文件的含义
3.1 目录简介
-
node_modules: npm构建的组件都在这个文件夹里面
-
public: 里面存放公共资源. 目前有index.html和公共图标,也可以存放公共的样式等
-
src 放置组件和axios配置
-
Assets -- 放置图片.img,css,js
-
components -- 放置其他组件所需要的公共组件
-
router -- 配置路由表,(动态路由,静态路由,权限路由)
-
store -- 存放vuex的仓库
-
Views -- 放置页面的地方
-
Home
-
......
-
App.vue 入口的总文件
-
main.js 实例化vue挂载
-
-
utils -- 所有封装axios,封装token,封装公共方法-----工具类文件
-
httpRequest.js --- 封装axios文件
-
-
api
-
api.js --- 封装接口的地方
-
-
-
.browserslitstrc: 浏览器适配配置
> 1% last 2 versions not dead
适配市场份额大于1%的最后两个版本, 不适配已经过期的版本
-
gitignore: 忽略文件
node_modules /dist
重点看这个, 忽略node_modules文件和/dist构建后的文件. 通过运行npm run serve就可以生成这两个文件了
-
babel.config.js: babel插件设置
module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ] }
通常, 不修改这个文件的内容
-
package.json: npm配置文件
{ "name": "03-vuecli3", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-