一、使用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