vue3 + elementplus 教程

2021-11-21 18:00:39 阅读：185 来源： 互联网

标签：教程 vue cli -- Vue element elementplus eslint vue3

一. 初始化

安装@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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue3 + elementplus 教程