@vue/cli@3.x 安装和项目结构
2021-03-15 本文已影响0人
微笑面对start
安装
npm install @vue/cli -g //最新版本
//安装指定版本
npm install @vue/cli@3.11.0 -g
卸载
npm uninstall @vue/cli -g
//卸载指定版本
npm uninstall @vue/cli@3.11.0 -g
创建项目格式: vue create 项目名称
vue create MyProject
安装配置介绍：
1. 创建项目
vue create MyProject
2. 选择要项目配置
- 第一个是默认的集成了babel 和 eslint
- 第二个是自定义的类型
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint)
Manually select features
Manually select features 自定义选项介绍
| 选项 | 描述 | 选择 |
|---|---|---|
| Choose Vue version | 选择Vue版本 | Y |
| Babel | vue项目中普遍使用es6语法，但有时我们的项目需要兼容低版本浏览器，这时就需要引入babel插件，将es6转成es5 | Y |
| TypeScript | TypeScript通过添加类型来扩展JavaScript。通过了解JavaScript，TypeScript可以节省您捕获错误的时间并在运行代码之前提供修复。任何浏览器，任何操作系统，任何运行JavaScript的地方。 完全开源 | |
| Progressive Web App (PWA) Support | 渐进式Web应用程序（PWA） | 支持 |
| Router | 路由 | |
| Vuex | Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化 | |
| CSS Pre-processors | CSS预处理器，预处理器：比如要用sass或者cssNext就要按照人家规定的语法形式，就是用人家的语法去编写，然后人家把你编写的代码转成css。 | |
| Linter / Formatter | 格式化程序 | Y |
| Unit Testing | 单元测试 | |
| E2E Testing | 端到端（end-to-end） |
我这里选择的 ：Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter
3. 手动选择对应的配置后，进行下一步选择vue 版本，因为3.x还是预览版，所以选择2.x 的版本
❯ 2.x
3.x (Preview)
4. 是否使用类组件语法:
即原本是：home = new Vue()创建vue实例
使用装饰器后：class home extends Vue{}
Use class-style component syntax? (Y/n)
5. 使用Babel与TypeScript一起用于自动检测的填充?
Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)
6. 路由使用历史模式? 这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
7. 使用什么css预编译器？ 我选择的 Less
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less //vue 一般搭配此项
Stylus
8. 选择一个代码检测的配置：TSLint只有在选择TypeScript时才会存在。
Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only // 只进行报错提醒
ESLint + Airbnb config // 不严谨模式
ESLint + Standard config // 正常模式
ESLint + Prettier // 严格模式
TSLint // TypeScript格式验证工具
9. 语法检测方式。一般是保存就检测
Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Lint on save //保存就检测
◯ Lint and fix on commit //提交时检测
10. 选择如何保存配置。这里我们一般选择单独生成配置文件。
Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files //#独立的文件放置
In package.json //#放到package.json中
11. 是否保存本次设置的配置。我选择的n
Save this as a preset for future projects? (y/N)
项目目录结构介绍
image.png
- node_modules:第三方依赖
- public:公共资源
- src:源码
- assets：静态资源，css、img、js、font等
- compoments：组件，一般自定义组件
- router：路由配置
- views：视图组件
- App.vue：首页组件（默认组件）
- main.js：入口文件
- .browserslistrc：配置使用CSS兼容性插件的使用范围
- .eslintrc.js：配置ESLint
- .gitignore：配置git忽略的文件或者文件夹
- babel.config.js：使用一些预设
- package.json：项目描述既依赖
- package-lock.json：版本管理使用的文件
- README.md：项目描述
修改配置方式。
最常用的是第三种。新建文件vue.config.js
- vue ui 命令
- node_moudles/@vue/cli-service/webpack.config.js 相关依赖
- 新建vue.config.js
