如果你有一个困扰就是为什么直接CV Element plus文档里的代码总是报各种错误?!那你看这篇就对啦!(针对Vue3哦)
1.项目导入vscode后,安装Element-plus
npm install element-plus --save
![](https://img-blog.csdnimg.cn/24f167979a7f43c08967358bb51db6e5.png)
2.在main.js中引入Element-plus
// 导入element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)
![](https://img-blog.csdnimg.cn/1c8bd55005d2417dbbfe7e0912281ff0.png)
3.引入Typescript包(以下3-6步是针对项目已经创建了,划到最底下是在创建项目时用vue-cli创建)
npm install --save-dev typescript
npm install --save-dev ts-loader
![](https://img-blog.csdnimg.cn/c01e0e118a554059a64050fdef035426.png)
4.webpack配置
vue cli 3.0及以上版本
创建的项目需要在vue.config.js中配置,代码如下:
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
})
module.exports = { configureWebpack: {
resolve: {
extensions: [".ts", ".tsx", ".js", ".json"],
alias: {}
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/],
}
}
]
}
}
}
其他的是在webpack.base.conf,可以参考
https://www.jianshu.com/p/3cbcdd766295
5.根目录下创建tsconfig.json,代码如下
{
"compilerOptions": {
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"lib": ["dom","es2016"],
"target": "es5"
},
"include": ["./src/**/*"]
}
![](https://img-blog.csdnimg.cn/c020ed54693945929ca81b9f9187f7d1.png)
6.src下创建test.ts文件,内容为空,如上图
![](https://img-blog.csdnimg.cn/a7b746285f584f398fac23710605d5e2.png)
7.另一种办法!用vue-cli引入。官方文档有说明:
![](https://img-blog.csdnimg.cn/0273d126734249148a163582fe6f2f19.png)
就是选择手动搭建,在这一步勾选(空格键),然后回车下一步。
![](https://img-blog.csdnimg.cn/e04b724853ea43ef997c400bf327d78a.png)
Over 从此element模版随便cv随便用~
制作不易,欢迎点赞收藏哦!
参考文档
Vue-cli3中使用TS语法,以及使用例子 - 简书