vue+Element搭建后台管理系统（一）快速搭建vue项目框架

前段时间公司要开发一个后台管理系统，思考了半天，决定选用vue这一框架，其实是公司强制要求的，哈哈，好了，别的不多说了，今天主要是帮助大家快速搭建起vue项目。

第一步，安装node和npm

百度搜索关键字'node'，就可以了，然后根据电脑的操作系统，直接下载就可以了
具体的安装步骤就不细说了，这个网上有很多，实际上一直点下一步就可以了，哈哈
现在最新的node里面已经包含有npm了，所以大家不用再安装npm了
安装好之后，在控制命令行程序（CMD）中分别输入node -v和npm -v查看一下，已确认是否安装成功，成功的话，会有类似下面的打印

第二步、安装vue和webpack
在控制命令行程序（CMD）中分别输入下面两行命令
npm install -g vue-cli 全局安装vue脚手架
npm install -g webpack 全局安装webpack
同样的想查看是否安装成功，输入webpack -v跟vue -V查看webpack的版本号跟vue的版本号，就行了

 

第三步、初始化项目
创建项目前，要选好项目所在的位置，比如我是在F盘，就直接在cmd中输入f:，进入F盘就可以了

在控制命令行程序（CMD）中输入vue init webpack vue-demo,vue-demo是你的项目名字，记住不能有大写字母

下面说一下其中的每一项的含义：
Project name————是你的项目名称，记住不能有大写字母
Project description————项目的简单描述，这个一般直接按Enter键，自动生成就可以了
Author————项目的作者
Install vue-router————是否使用vue-router，一般都选用，输入y
Use ESLint to lint your code————代码是否使用ESLint规范，我这里没有使用，所以输入n
剩余的几项直接按Enter键，自动生成就可以了

 

创建完之后，进入F盘会发现多个了vue-demo文件夹，打开文件夹里面是这样的

 

第四步、启动项目
此时项目搭建进入最后一步了，下载相关依赖文件，在控制命令行程序（CMD）中输入cd vue-demo进入到vue-demo文件夹

然后输入npm install,下载所需要的各种依赖文件，下载完之后你会发现vue-demo文件夹下多了个node_modules文件夹
最后输入npm run dev就可以启动项目了，出现下面页面就说明项目启动成功了

但此时需要你手动在浏览器输入http://localhost:8080/#/，才能显示在浏览器中看到下面页面

到此，可以说一个简单的vue项目我们就创建好了，不过有一点不足，就是URL地址需要我们自己手动在浏览器中输入，其实这是我们没有开启webpack的热服务，改下配置就好了