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>

運行，如圖