lz是一个在小公司被折磨了一年的“全栈工程”（一个人当n个人用，开发前端，开发后台，运维，实施全都来，然后美其名曰“全栈工程师”）
今年跳槽到了一家大公司的小部门，今年要上一个新的项目，介于项目组没有专门的前端工程师，我就成了最懂前端的那位了，自然前端项目搭建的重担就落在了lz的肩上（新项目采用微服务架构，彻底的前后端分离），之前lz虽然也帮着做前端的开发，但是毕竟后台出生，且刚刚接触vue，所以要搭建一个好用的前台框架还是有一定难度的，好在项目经理对时间上比较宽松，让lz有时间学习和摸索自己搭建一个新的前台框架，我自然是很高心的接受了这份差事，这么好的机会上哪去找。
由于lz开发的是是一套类似后台管理系统，所以就在技术上选择了现在大热的vuejs，以及adminlte模板来辅助开发，降低开发难度，所以接下来的几个月，lz会不定期和大家分享一个“全栈工程师”在一个spingboot+springcloud+docker+vue的技术框架下（微服务架构）的后台管理系统中的酸甜苦辣。
不多bb，先创建一个全新的vue项目
一、开发环境
vue推荐开发环境:
Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言
npm: Nodejs下的包管理器。
webpack: 它主要的用途是通过 CommonJS 的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。
vue-cli: 用户生成Vue工程模板
二、环境搭建
安装node.js：
1. 从node.js官网下载并安装node，安装过程很简单。
2. npm 版本需要大于 3.0，如果低于此版本需要升级它：
# 查看版本$ npm -v2.3.0#升级 npmcnpm install npm -g
3.基于node.js,利用淘宝npm镜像安装相关依赖。由于国内使用npm会很慢,这里推荐使用淘宝NPM镜像（http://npm.taobao.org/）
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
- 1
完成之后，我们就可以用cnpm代替npm来安装依赖包了。
三、安装vue-cli脚手架构建工具
安装全局vue-cli脚手架,用于帮助搭建所需的模板框架
$ cnpm install -g vue-cli# 回车，等待安装...$ vue# 回车，若出现vue信息说明表示成功
四、用vue-cli构建项目
# 创建一个基于 webpack 模板的新项目$ vue init webpack adminlte-vue-antxs# 这里需要进行一些配置，默认回车即可This will install Vue 2.x version of the template.For Vue 1.x use: vue init webpack#1.0 adminlte-vue-antxs? Project name adminlte-vue-antxs? Project description A Vue.js project? Author runoob sunxiujie? Vue build standalone? Use ESLint to lint your code? Yes? Pick an ESLint preset Standard? Setup unit tests with Karma + Mocha? Yes? Setup e2e tests with Nightwatch? Yes vue-cli · Generated "adminlte-vue-antxs". To get started: cd adminlte-vue-antxs npm install npm run dev Documentation can be found at https://vuejs-templates.github.io/webpack
五、安装依赖
在cmd里
1).输入：cd adminlte-vue-antxs（项目名），回车，进入到具体项目文件夹2).输入：cnpm install，回车，等待一小会儿
比如要添加vue的路由
cnpm install vue-router
回到项目文件夹，会发现项目结构里，多了一个node_modules文件夹（该文件里的内容就是之前安装的依赖）这个里面的依赖包括vue-router等各种vue的工具
六、测试环境是否搭建成功
方法1：在cmd里输入：npm run dev
方法2：在浏览里输入：localhost:8080(默认端口为8080)
用sublime打开项目目录
目录/文件 说明
build 项目构建(webpack)相关代码
config 配置目录，包括端口号等。我们初学可以使用默认的。
node_modules npm 加载的项目依赖模块
src 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含
了几个目录及文件：assets（资产）: 放置一些图片，如logo等。
components(组件): 目录里面放了一个组件文件，可以不用。App.vue: 项
目入口文件，我们也可以直接将组件写这里，而不使用 components 目
录。main.js: 项目的核心文件。
static 静态资源目录，如图片、字体等。
test 初始测试目录，可删除
.xxxx文件 这些是一些配置文件，包括语法配置，git配置等。
index.html 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json 项目配置文件。
README.md 项目的说明文档，markdown 格式