初试使用vuelic搭建Vue3.x使用element plus UI组件开发前端模版框架

目录

环境:

工具:

步骤:

1.脚手架安装VUE

2.导入element plus 模块

3.引入element plus         

4.执行

---

环境:

node:V14.17.6
npm:V6.14.15
vuecli:V5.0.4
vue:V3.2.13

工具:

VScode

步骤:

1.脚手架安装VUE

vue create demo

安装选项
1.Manually select features //自定义

2. 按需勾选
 (*) Babel
 (*) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing
3.选择> 3.x版本

4.Use class-style component syntax? (y/N) ==>N

5.Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) ==>Y

6.Use history mode for router? (Requires proper server setup for index 
fallback in production) (Y/n) ==>Y

7.Sass/SCSS (with dart-sass)

8.ESLint + Standard config

9.Lint on save

10.In dedicated config files

11.Save this as a preset for future projects? (y/N)  ==>N  不保存配置

2.导入element plus 模块

npm install element-plus --save

3.引入element plus         

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)

package.json

  "dependencies": {

    "core-js": "^3.8.3",

    "element-plus": "^2.2.2",

    "vue": "^3.2.13",

    "vue-router": "^4.0.3",

    "vuex": "^4.0.0"

  },

vue.config.js

关闭语法检测

lintOnSave: false

main.ts

import { createApp } from 'vue'

import App from './App.vue'

import router from './router'

import store from './store'

import ElementPlus from 'element-plus'

import 'element-plus/dist/index.css'

const app = createApp(App)

app.use(ElementPlus)

app.use(store).use(router).mount('#app')

router/index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

import HomeView from '../views/Login.vue'

const routes: Array<RouteRecordRaw> = [

  {

    path: '/',

    name: 'home',

    component: HomeView

  },

  {

    path: '/about',

    name: 'about',

    // route level code-splitting

    // this generates a separate chunk (about.[hash].js) for this route

    // which is lazy-loaded when the route is visited.

    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')

  }

]

const router = createRouter({

  history: createWebHistory(process.env.BASE_URL),

  routes

})

export default router

app.vue

<template>

<router-view></router-view>

</template>

<script>

</script>

<style>

html,body,#app{

  height: 100%;

  width: 100%;

  margin: 0;

}

</style>

接下来在views/Login.vue下编写或引用element plus 官方组件的代码即可执行

4.执行

npm run serve