vue3 + elementplus 教程

一. 初始化

安装@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
标签：教程,vue,cli,--,Vue,element,elementplus,eslint,vue3	

来源： https://www.cnblogs.com/zsg88/p/15583275.html