2021搭建企业级后台（Vue + TS + Element Plus ）～ 1.创建项目

安装 Vue CLI：

$ npm install -g @vue/cli
# 检查版本
$ vue --version
# @vue/cli 4.5.13

创建项目：

# 进入桌面
$ cd Desktop/

# 创建名为 edu 的项目
$ vue create edu

# vue2 结合 babel 和 eslint 这两个工具 来创建这个项目
# vue3 结合 babel 和 eslint 这两个工具 来创建这个项目
# 手动选择功能特性来创建这个项目
Vue CLI v4.5.13
? Please pick a preset: 
  Default ([Vue 2] babel, eslint) 
  Default (Vue 3) ([Vue 3] babel, eslint) 
❯ Manually select features 

# 选择vue 版本，如果不选择则默认vue2
# babel 用于ES6转ES5，或者转换JSX等这样的一些功能
# TS 项目中需要用到TS来编写
# Router 管理项目中的路由
# Vuex 管理项目中的共享的数据容器
# CSS- 预处理器 可以使用sass less 等等
# linter  代码格式校验工具
# 最后两个是和测试相关的
Vue CLI v4.5.13
? 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

# 因为选择了 TS，所以询问是否使用class风格的语法来描述组建
? Use class-style component syntax? (Y/n) y

# 因为我们选择了TS，它默认就具有将ES6编译成ES3做一个向下兼容
# 这里是询问是否只用TS 编译TS部分（类型做编译），而不做ES6转ES5这些功能，其他的由babel来处理
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfi
lls, transpiling JSX)? (Y/n) y

# 是否使用History来作为你的路由模式，这种模式虽然好看简介，但是兼容不太好
? Use history mode for router? (Requires proper server setup for index fallback 
in production) (Y/n) n

# 选择CSS预处理器，没有好坏之分，这里我们选择功能更多的dart-sass
? 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 
  Stylus 

# 选择代码格式校验
# 看团队喜欢什么代码风格，这里选用Standard 代码风格校验
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: 
  ESLint with error prevention only 
  ESLint + Airbnb config 
❯ ESLint + Standard config 
  ESLint + Prettier 
  TSLint (deprecated) 

# 什么时候来触发代码格式校验
# 当我们编写 保存代码的时候就帮我们触发代码格式校验，这个校验是及时的，能够马上知道代码是否符合校验规范
# 当我们去提交的时候，来帮我们做代码格式校验和自动修正
? Pick additional lint features: 
 ◉ Lint on save
❯◉ Lint and fix on commit

# 对于 Babel ESLint这些工具会生成一些配置信息
# 一种方法是和package.json写到一起
# 还有一种办法是将这些配置信息存放到单独的文件当中
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files 
  In package.json 

# 是否将刚刚的一系列选项保存一下，下一次就可以快速创建一个新的项目
? Save this as a preset for future projects? (y/N) n


wait...


...
🎉  Successfully created project edu.
👉  Get started with the following commands:

 $ cd edu
 $ npm run serve

# 根据提示，进入文件目录
$ cd edu
# npm 运行项目
$ npm run serve

...
Time: 3115ms

  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.0.107:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

# 去浏览器粘贴地址查看项目 http://localhost:8080/ 

项目创建成功