SpringBoot + Vue 搭建 Blog（一）-- 安装 vue-cli 脚手架

一、环境准备

首先我们需要在自己的开发机器上安装nodeJs，如果不确定自己是否已经安装，可以使用以下命令查看：

node -v  #查看node版本，检查是否安装node
npm -v
yarn -v

 如果正常显示版本，则说明已经安装了nodeJs，如果没有安装，可以访问node官网：http://nodejs.cn/download/，下载安装node。

二、Vue CLI 全局安装

安装命令：

npm install -g vue-cli   # -g 全局安装

 使用npm可能会比较慢，我们可以使用cnpm -- npm 的国内镜像，使用 cnmp 的好处是在日后下载内容时会比较快，但是下载的包可能不是最新的。安装 cnpm 的命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

使用cnpm可能会出现问题，下载依赖失败，如果无法继续可以将node_modules 文件夹里面的依赖删除重新执行命令下载依赖。

安装完成以后，可以通过以下命令查看vue的命令用法 ：

vue -h

三、初始化项目

初始化命令：

vue init webpack vue-blog(项目名称/文件夹名称)

init：表示我要用vue-cli来初始化项目

(webpack)：表示模板名称，vue-cli官方为我们提供了5种模板，

• webpack-一个全面的webpack+vue-loader的模板，功能包括热加载，linting,检测和CSS扩展。

• webpack-simple-一个简单webpack+vue-loader的模板，不包含其他功能，让你快速的搭建vue的开发环境。

• browserify-一个全面的Browserify+vueify 的模板，功能包括热加载，linting,单元检测。

• browserify-simple-一个简单Browserify+vueify的模板，不包含其他功能， 可以快速的搭建vue的开发环境。

-simple : 一个最简单的单页应用模板。

(vue-blog)：标识项目名称，这个你可以根据自己的项目来起名字。

执行命令会开始下载一个我们指定名称的项目，我们需要指定以下项目参数。项目名称直接使用默认的，选择安装 vue-router，ESLint是代码质量检测工具，这里我选择安装。

• Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写。
• Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。
• Author：作者，如果你有配置git的作者，他会读取。
• Install vue-router? 是否安装vue的路由插件，选择Y。
• Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格，最好是进行配置。
• Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试。

四、启动项目

进入项目文件夹，执行依赖运行命令：

# 进入项目文件夹
cd vue-blog

# 运行项目-dev方式
npm run dev

项目构建成功之后，访问 http://localhost:8080，可以看到以下内容，说明部署完成。 

五、项目文件配置介绍

1. build（webpack的初始化配置）
2. config（index.js--项目配置）
3. node_modules（项目依赖模块，代码库）
4. src（程序文件）
5. static（静态文件资源）
6. test（测试代码）
7. index.html （项目首页入口）

|-- build // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- dev-client.js // 热重载相关
| |-- dev-server.js // 构建本地服务器
| |-- utils.js // 构建工具相关
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
| |-- test.env.js // 测试环境变量
|-- src // 源码目录
| |-- components // vue公共组件
| |-- store // vuex的状态管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件，加载各种公共组件
|-- static // 静态文件，比如一些图片，json数据等
| |-- data // 群聊分析得到的数据用于数据可视化
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- README.md // 项目说明
|-- favicon.ico
|-- index.html // 入口页面
|-- package.json // 项目基本信息
.