一. 初始化
安装@vue/cli ，
-
-g： 全局安装vue-cli
npm install @vue/cli -g
或者
yarn global add @vue/cli
二. 创建项目
vue create 项目名
进行项目初始化
D:\workspace\test>vue create element-plus-test ? Your connection to the default npm registry seems to be slow. Use https://registry.npm.taobao.org for faster installation? (Y/n)y
是否使用淘宝镜像进行快速安装
Vue CLI v4.5.15 ? Please pick a preset: (Use arrow keys) Default ([Vue 2] babel, eslint) Default (Vue 3) ([Vue 3] babel, eslint) > Manually select features
Manually select features【选择手动配置】
Vue CLI v4.5.15 ? Please pick a preset: Manually select features ? Check the features needed for your project: (*) Choose Vue version (*) Babel (*) TypeScript >( ) Progressive Web App (PWA) Support (*) Router (*) Vuex (*) CSS Pre-processors (*) Linter / Formatter ( ) Unit Testing ( ) E2E Testing
Check the features needed for your project (选择你项目需要添加的功能) ；
-
Choose Vue Version： 选择vue版本 -
Babel：转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。 -
TypeScript：TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行 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） 测试
Vue CLI v4.5.15 ? Please pick a preset: Manually select features ? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter ? Choose a version of Vue.js that you want to start the project with 2.x > 3.x
Choose a version of Vue.js that you want to start the project with (选择项目使用的vue版本)，选择3.x
? Use class-style component syntax? (y/N) y
是否使用Class风格装饰器？如果在项目中想要保持使用TypeScript的class风格的话，建议选择y
即原本是：home = new Vue()创建vue实例
使用装饰器后：class home extends Vue{}
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) y
使用Babel与TypeScript一起用于自动检测的填充? yes
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y
路由使用历史模式? 这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
Pick a CSS pre-processor ： (选择一个CSS预处理器) ，这里选择 less
? Pick a linter / formatter config: (Use arrow keys) > ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier TSLint (deprecated)
Pick a linter / formatter config (选择一个格式化配置)，选择：ESLint + Standard config
-
ESLint with error prevention only: 只进行报错提醒； -
ESLint + Airbnb config: 不严谨模式； -
ESLint + Standard config: 标准模式； -
ESLint + Prettier: 严格模式； -
TSLint (deprecated): typescript格式验证工具
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) >(*) Lint on save ( ) Lint and fix on commit (requires Git)
代码检查方式：选择保存时检查
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) In dedicated config files > In package.json
Where do you prefer placing config for Babel, ESLint, etc.? 选择：In package.json ,
vue-cli 一般来讲是将所有的依赖目录放在package.json文件里
? Save this as a preset for future projects? (y/N) n
是否在以后的项目中使用以上配置？n
然后等待安装。。。。
Vue CLI v4.5.15 ✨ Creating project in D:\workspace\test\element-plus-test. ⚙️ Installing CLI plugins. This might take a while... added 1327 packages in 22s 16 packages are looking for funding run `npm fund` for details