@vue/cli 3.x 和 4.x 很像。如需查看请走下面的版本。
@vue/[email protected]
@vue/[email protected]
安装
npm install @vue/cli -g //最新版本
//安装指定版本
npm install @vue/[email protected] -g
卸载
npm uninstall @vue/cli -g
//卸载指定版本
npm uninstall @vue/[email protected] -g
创建项目格式: vue create 项目名称
vue create MyProject
安装配置介绍:
1. 如果是第一次会提示是否使用淘宝镜像。输入y 即可。
2. 选择要项目配置
- 第一个是默认的Vue 2 项目 集成了babel 和 eslint
- 第二个是默认的Vue 3 (预览版本) 集成了babel 和 eslint
- 第三个是自定义的类型
Please pick a preset: (Use arrow keys)
❯ Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] 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 (deprecated) // TypeScript格式验证工具
9. 语法检测方式。一般是保存就检测
Pick additional lint features: (Press to select, to toggle all, 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)
项目目录结构介绍
- 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