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

后期持续更新中…