vue2项目配置

最新推荐文章于 2024-05-22 23:13:04 发布

2201_75880977

最新推荐文章于 2024-05-22 23:13:04 发布

阅读量1.2k

点赞数 18

文章标签： vue.js

本文链接：https://blog.csdn.net/2201_75880977/article/details/134859970

版权

使用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-

最低0.47元/天解锁文章

2201_75880977

关注

18
点赞
踩
22

收藏

觉得还不错? 一键收藏
1
评论
vue2项目配置

node_modules: npm构建的组件都在这个文件夹里面public: 里面存放公共资源. 目前有index.html和公共图标,也可以存放公共的样式等src 放置组件和axios配置Assets -- 放置图片.img,css,jscomponents -- 放置其他组件所需要的公共组件router -- 配置路由表,(动态路由,静态路由,权限路由)store -- 存放vuex的仓库Views -- 放置页面的地方Home......App.vue 入口的总文件。
复制链接

扫一扫