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]    

在这里插入图片描述

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