【vue3】使用vscode 创建vue3.0项目,并集成element-plus
vscode vue3element-plus
·
1、新建vue3.0项目
//先建终端,依次执行下述命令
npm init vite-app 项目名称
npm install
npm run dev
浏览器打开:http://localhost:3000/
2、新建vue模板
文件-首选项-用户片段,输入vue.json 回车。复制下述代码,然后保存。
{
"Print to console": {
"prefix": "vue",
"body": [
"<!-- $0 -->",
"<template>",
" <div></div>",
"</template>",
"",
"<script>",
"export default {",
" data () {",
" return {",
" };",
" },",
"",
"}",
"</script>",
"<style scoped>",
"</style>"
],
"description": "Log output to console"
}
}
在vue文件中,输入vue,点击回车即可新建vue模板。
3、配置路由依赖
终端进入项目:cd+项目名,执行下面指令即完成路由的安装。
npm install vue-router -s
4、安装axios
终端进入项目:cd+项目名,执行下面指令即完成路由的安装。
npm install axios -s
5、安装element-plus
终端进入项目:cd+项目名,执行下面指令即完成路由的安装。vue3使用的elementui名称为element-plus:一个 Vue 3 UI 框架 | Element Plus (gitee.io)
npm install element-plus -s
npm install @element-plus/icons -s
6、补充--换了一台电脑按照上述语句执行不可,所以有下述的解决方法
如果执行第一条语句时报下面的错误: 说明不支持使用该命令进行创建vue项目
可以按照下面的操作进行:
执行:npm install @vitejs/create-app@latest
执行:npm init @vitejs/app 项目名称 。后续会有一些提示,按照自己的需求选择即可。
7、其他
安装最新版脚手架vscode执行:npm install -g @vue/cli@next
卸载脚手架:npm uninstall -g @vue/cli
8、按照插件
后续有内容继续补充。
更多推荐
已为社区贡献5条内容
所有评论(0)