VueJS搭建简单后台管理系统框架(一)环境搭建

sdfouhdso888

　　做这份笔记的时候，Vue.js还是1.0，10月份Vue已经升级到2.0，这边也进行相应的更新，用Vue2.0进行一个简单的环境搭建
　　
饿了么也刚好开源了其基于Vue.js的UI框架element-ui

传送门

• Node
  
• npm | nrm
  
• Vue | Guide　　
  
  
  
• Vue-router | Documentation
  
• Vue-resource
  
• element-ui | Documentation
  
• Bootstrap | Font Awesome & documentation
  
• CNode社区 | Node入门
  

1. 环境搭建

　　由于办公环境是在Windows下开发，所以还是选择在Windows进行Vue.js的开发，使用NodeJS环境进行编译，打包等

1.1 NodeJS及NPM安装

1.1.1 NodeJS下载
　　在NodeJS官网中下载对应的NodeJS版本https://nodejs.org/en/
　　
下载完成后进行安装，NodeJS安装完成后，对应的NPM也会安装完成，安装完成后需要设置NodeJS到环境变量中，在CMD命令行键入以下代码，验证NodeJS及NPM是否安装正确 目前最新版本4.6.0对应npm版本2.15.9，可以手动升级到最新版本npm
　　

> node -v　　
v4.6.0
　　
> npm -v
　　
v2.15.9
　　

　　npm升级到最新版本的方法：
　　
切换路径到nodejs安装目录下（如：c:\program files\nodejs\）,执行以下命令:
　　
npm install npm@latest -g

1.1.2 安装nrm
　　由于npm的镜像资源在国外，访问速度慢，可以使用npm安装nrm，来管理npm的镜像资源
　　

> npm install -g nrm  　　

　　使用nrm ls命令查看可用的资源
　　

　　
使用 nrm use ***选择要使用的镜像，如nrm use taobao
　　


1.1.3 安装打包工具webpack
　　使用
　　

npm install -g webpack　　

　　安装webpack
　　


1.2 使用Vue的官方命令行工具搭建一个简单的VueJS应用

1.2.1 安装vue-cli
　　使用命令
　　

npm install -g vue-cli　　

　　安装Vue的官方命令行工具vue-cli
　　


1.2.2 用vue-cli搭建一个基本的工程
　　使用以下命令,创建一个名为vue-test的前端项目
　　

vue init webpack vue-test　　

　　此致环境的搭建基本完成