其他分享
首页 > 其他分享> > vue3 + elementplus 教程

vue3 + elementplus 教程

作者:互联网

一. 初始化

安装@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 (选择你项目需要添加的功能)  ;

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 

? 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