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
🚀  Invoking generators...
📦  Installing additional dependencies...


added 169 packages in 7s

26 packages are looking for funding
  run `npm fund` for details
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project element-plus-test.
👉  Get started with the following commands:

 $ cd element-plus-test
 $ npm run serve

 项目创建成功。

三. vue3项目结构介绍 

结构

|-node_modules -- 所有的项目依赖包都放在这个目录下

|-public -- 公共文件夹

---|favicon.ico -- 网站的显示图标

---|index.html -- 入口的html文件

|-src -- 源文件目录，编写的代码基本都在这个目录下

---|assets -- 放置静态文件的目录，比如logo.pn就放在这里

---|components -- Vue的组件文件，自定义的组件都会放到这

---|router -- vue-router路由文件。index.ts中引入views包下的*.vue

---|store -- 是vuex的文件，主要用于项目里边的一些状态保存。比如state、actions等

---|views -- 用于存放我们写好的各种页面，即路由组件，比如Login.vue，Home.vue

---|App.vue -- 根组件，这个在Vue2中也有

---|main.ts -- 入口文件，因为采用了TypeScript所以是ts结尾

---|shims-vue.d.ts -- 类文件(也叫定义文件)，因为.vue结尾的文件在ts中不认可，所以要有定义文件

|-.browserslistrc -- 在不同前端工具之间公用目标浏览器和node版本的配置文件，作用是设置兼容性

|-.eslintrc.js -- Eslint的配置文件，不用作过多介绍

|-.gitignore -- 用来配置那些文件不归git管理

|-babel.config.js --工具链，主要用于在当前和较旧的浏览器或环境中将ES6的代码转换向后兼容

|-package.json -- 命令配置和包管理文件

|-README.md -- 项目的说明文件，使用markdown语法进行编写

|-tsconfig.json -- 关于TypoScript的配置文件

 

四. 集成element-plus

npm install element-plus --save

现在的package.json

{
  "name": "element-plus-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.24.0",
    "core-js": "^3.6.5",
    "element-plus": "^1.2.0-beta.3",
    "vue": "^3.0.0",
    "vue-class-component": "^8.0.0-0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "@vue/eslint-config-typescript": "^7.0.0",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^7.0.0",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "typescript": "~4.1.5"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "@vue/standard",
      "@vue/typescript/recommended"
    ],
    "parserOptions": {
      "ecmaVersion": 2020
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

下面修改main.ts 

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus' // 引入element-plus
import 'element-plus/theme-chalk/index.css' // 引入element-plus的样式

createApp(App)
  .use(store)
  .use(router)
  .use(ElementPlus, { zIndex: 3000, size: 'small' }) // 使用element-plus
  .mount('#app')

修改App.vue页面，增加一个element-plus按钮显示

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <!-- element-plus按钮 -->
  <el-button type="primary">hello element-plus</el-button>  
  <router-view/>
</template>

运行，如图