Vue3+Ts+Element Plus 创建项目模板

Vue3+ts+element-plus创建项目

前言

现在Vue3和ts逐渐成为主流，今天刚接了一个后台管理需求，考虑用现在流行的框架技术做。

接下来全用npm包管理器。

正文

一、创建vue项目

第一步：下载vue脚手架

打开终端并运行以下命令来全局安装Vue CLI

 npm install -g @vue/cli

第二步：创建项目

在终端中切换到你想要创建项目的目录，然后运行以下命令来创建一个新的Vue项目。

vue create 项目名

现在有三个选项
在这里插入图片描述

Default ([Vue 3] babel, eslint)
vue3的默认配置
Default ([Vue 2] babel, eslint)
vue2的默认配置
Manually select features
自己选择配置

空格选中需要安装的，我选择下面的

我使用的是vue3的默认配置，ts等安装后续自己配置。
几乎一直回车，这是我的配置
在这里插入图片描述

第三步：启动项目

npm run serve

可以看出ts等安装成功
在这里插入图片描述

二、安装Element Plus

注意：
Element Plus 支持最近两个版本的浏览器。
如果您需要支持旧版本的浏览器，请自行添加 Babel 和相应的 Polyfill 。
由于 Vue 3 不再支持 IE11，Element Plus 也不再支持 IE 浏览器。

第一步：安装element-plus

 npm install element-plus --save

第二步：安装按需引入的插件

我这次接的需求不大，再加上性能优化（打包后文件变小），所以我选择按需引入的方式。

npm install -D unplugin-vue-components unplugin-auto-import

默认安装打包工具是webpack
要先改两个文件

vue.config.ts

const { defineConfig } = require("@vue/cli-service");
const AutoImport = require("unplugin-auto-import/webpack");
const Components = require("unplugin-vue-components/webpack");
const { ElementPlusResolver } = require("unplugin-vue-components/resolvers");

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  },
});

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
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)
app.use(router)
app.mount('#app')

注意一些坑
启动的时候会出现AutoImport is not a function
在这里插入图片描述
出现Components is not a function

上述两个问题都是因为插件版本过高导致的，找package.json文件,看下面红框版本，降低版本。

npm install [email protected]    
npm install [email protected]

在这里插入图片描述

最后看测试结果
在这里插入图片描述