Vue 全家桶搭建后台管理系统(一、搭建项目)

准备工作

该项目是使用 Vue 官方提供的 vue-cli 这个构建工具,大大降低了我们使用webpack来配置项目的难度。
1、该项目要基于node环境,所以我们要去官网下载安装(具体不再赘述);
2、安装npm,一般安装最新版node的时候就会安装好npm。

开始搭建

一、全局安装 vue-cli,输入下面的命令:npm install -g vue-cli
二、创建一个基于 webpack 模板的新项目 myProject(项目名可自己定义),输入命令:vue init webpack myProject

接下来一般都按 enter 键即可,但要注意以下两点:
1、项目名称:项目名不能包含大写字母,myProject中包含大写字母,所以需要修改。

Project name

2、ESLint 即代码规范,这个直接选 Y 的话,代码写得不规范会报错,新手很蛋疼,所以可以选 n
ESLint

3、项目创建成功

三、进入创建的项目文件夹:cd myProject
四、启动本地服务器:npm run dev

1、在浏览器中打开图中地址:

2、可以看到项目搭建成功!
五、接下来安装我们需要的插件依赖包

1、安装 element-ui(基于vue的UI框架): npm i element-ui -S
然后在 main.js 中写入黑体部分,修改为以下内容:

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

2、安装 axios (AJAX与后台交互数据)
npm install axios -s
3、安装 vuex(基于vue的状态管理模式)
npm install vuex -S
4、安装 echarts(图表显示)
npm install echarts --save

六、偷懒借菜鸟教程的说明,注释下我们的项目目录
myProject
七、未完待续......
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本文作者 Jinkey(微信公众号 jinkey-love,官网 https://jinkey.ai)原文链接 h...
    JinkeyAI阅读 425,733评论 152 921
  • 在课堂上,李老师要我们两人一组,交流一分钟。我本来准备去找蔡蔡,正好有事情跟她说。可是已经有人在我之前找了...
    萧瑟处1981阅读 208评论 0 0
  • 用早晨三分钟让你的人生大不同! 1.为何要在早上写日记? 早上是一天中最好的时光,早上我们大脑思路清晰,更容易写出...
    行动者阿慧阅读 227评论 0 2
  • 我的少女时代 说真的 我的少女时代 经历了些什么 我都快忘啦 记得每天和大太太二太太一起调戏老家伙 每天大家一起在...
    小龙Yo阅读 293评论 1 1