【vue3】使用vscode 创建vue3.0项目,并集成element-plus
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
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、按照插件

后续有内容继续补充。
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
1 年前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 1 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐



所有评论(0)