从0到1搭建vue3+ts+vite+element-plus简易后台管理系统

准备工作

首先请确保你的node.js版本>=12.0.0

因为vite的兼容性，Vite 需要 Node.js 版本 >= 12.0.0。

如果你不知道你的node.js的版本是多少，请按照如下步骤

window r

输入cmd，然后回车

然后输入node -v,就可以查看node.js版本啦

 开始搭建

npm init vite@latest

 如果出现下面的情况，是因为权限不够，你需要切换到管理员下运行

 右键电脑左下角的windows，找到命令提示符（管理员）

 cd切换到你需要搭建项目的目录，然后重新输入

npm init vite@latest

 输入自己的项目名称

 

 选择你熟悉的框架，回车，这里我选择的是vue

 

 使用上下箭头，选择vue ts，回车

 然后方框里面的步骤执行 

 

 最后执行npm run dev，你就会得到这个页面啦啦啦啦啦啦

你以为这样就可以了？？？

不！不！不！

实际去开始项目，你还需要下载引入项目需要的vue-router，vuex，axios，element-plus等等依赖，这些根据自己项目的需求去搭建就好啦。

当然这里我就拿element-plus单独出来讲讲........是骡子是马，拉出来遛遛。。。。

1.下载element-plus

1.  
   # 选择一个你喜欢的包管理器
2.  
    
3.  
   # NPM
4.  
   $ npm install element-plus --save
5.  
    
6.  
   # Yarn
7.  
   $ yarn add element-plus

2.完整引入。在main.ts文件引入

1.  
   // main.ts
2.  
   import { createApp } from 'vue'
3.  
   import ElementPlus from 'element-plus'
4.  
   import 'element-plus/dist/index.css'
5.  
   import App from './App.vue'
6.  
    
7.  
   const app = createApp(App)
8.  
    
9.  
   app.use(ElementPlus)
10.  
    app.mount('#app')

根据官网的说法如果您使用 Volar，请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。

补充知识：vue3在vscode使用的插件是volar（vue2的是vetur），为什么呢？？

解答：因为写过vue2的人都知道，vue的template里，只能有一个根标签，使用多标签，vetur插件就会提示你有错误，但是vue3之后，去掉了这个限制，template标签里是允许有多个标签的，这是vue3.0的新功能，所以我们需要使用适合vue3的volar插件

1.  
   // tsconfig.json
2.  
   {
3.  
   "compilerOptions": {
4.  
   // ...
5.  
   "types": ["element-plus/global"]
6.  
   }
7.  
   }

------------------------------------转折 -----------------------------------

就不对称，逼死强迫症！！！

完整引入一般是不推荐的，因为包面积太大了，对于性能不友好！！！！

一般推荐使用按需引入！！

2.按需引入，顾名思义，就是把你需要的组件一个个导入。当然官网很友好，推出了自动导入的。

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

1.  
   #选择一个你喜欢的包管理器
2.  
    
3.  
   #NPM
4.  
   # npm install -D unplugin-vue-components unplugin-auto-import
5.  
    
6.  
   #Yarn
7.  
   $ yarn add -D unplugin-vue-components unplugin-auto-import

接着找到vite.configf.ts文件，插入以下代码

1.  
   import AutoImport from 'unplugin-auto-import/vite'
2.  
   import Components from 'unplugin-vue-components/vite'
3.  
   import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
4.  
    
5.  
   export default {
6.  
   plugins: [
7.  
   // ...
8.  
   AutoImport({
9.  
   resolvers: [ElementPlusResolver()],
10.  
    }),
11.  
    Components({
12.  
    resolvers: [ElementPlusResolver()],
13.  
    }),
14.  
    ],
15.  
    }

直接在页面使用就好

效果如下 

 

想更多的了解element-plus引入 ，欢迎去官网看文档设计 | Element Plus

需要特别注意的是：element-plus中icon的引入！！！！

如果你按照文档上面的做法，老老实实的去安装

1.  
   # 选择一个你喜欢的包管理器
2.  
    
3.  
   # NPM
4.  
   $ npm install @element-plus/icons-vue
5.  
   # Yarn
6.  
   $ yarn add @element-plus/icons-vue

然后直接使用

 然后你就会得到。。一片空白 ？？？我的图标呢？？

正确的使用方法是，你还需要去引入一下图标

 如果你走到这里，那么恭喜你，哈哈哈项目已经搭建好啦，可以开开心心的去开发啦！！

完结啦！！！小编就陪你到这了，剩下的路自己去走吧！

著作不易，喜欢的留下你的小脚丫。。

有不解的，请留言评论。。

这篇好文章是转载于：学新通技术网