Vue3.0初级教程

一、使用vue-cli3.0构建vue3.0项目

卸载旧版本vue-cli(1.x 或 2.x),无否则跳过此步:

npm uninstall -g vue-cli

安装脚手架vue-cli 3.0

npm install -g @vue/cli

检查版本判断安装成功【注意使用CMD,powershell策略可能会提示未签名】

vue -V

新建项目文件夹,在文件夹中使用vue-cli创建项目【demo为项目名称】

vue create demo

创建完成,根据提示进入并启动项目(访问指定路径可以进入vue官网样式的界面则说明创建成功)

cd vue-demo
npm run serve

界面使用Element ui框架,安装Element UI Plus(package.json显示以下信息则表示安装成功)

npm install element-plus --save

在这里插入图片描述

安装router路由

npm install vue-router@next --save

安装axios用于get/post访问

npm install axios
npm install vue-axios

安装vuex全局存储

npm install vuex@next --save

安装数据模拟Mock

npm install mockjs --save

使用vue3-echarts链接

npm add vue3-echarts

或者使用echarts-for-vue链接

npm i -S echarts-for-vue

使用高德地图(注意:配置完成需要重启一下)

npm install vue-amap --save

最后项目打包部署

根目录下创建vue.config.js文件,输入:

module.exports = {
  // 项目名称
  outputDir: 'rubbish',
  //打包的静态资源目录
  assetsDir: 'assets',
  publicPath: '',

}

然后运行打包命令:

npm run build

8、垃圾分类后台管理系统demo:

链接地址:https://blog.csdn.net/sdfjasad/article/details/120002318

后期持续更新中…

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

猴狲

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值