vueJs(2.x)+router+vuex简易博客系统<一>

通过写简易博客系统来学习vue全家桶的使用

项目基础搭建

技术选型

• 前端

  • vue.js(2.x)这里就不介绍它的基础了，可以看下官网的api写的非常清晰易懂
  • vue-router@2.x 路由，注意: vue-router@2.x 只适用于 Vue 2.x。
    
    • 官网：https://router.vuejs.org/zh-cn/

• java

  • spring+springmvc+mybatis(可以不用关注)

---

安装步骤

1、node安装
进入node官网下载即可：https://nodejs.org/en/download/
安装成功后使用命令 node -v 查询版本号

2、npm安装
命令：npm install npm -g
查询版本：npm -v

3、vue安装
安装vue：npm install vue
查询版本：vue -V (大写)

4、vue CLI
可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置
全局安装：npm install –g vue-cli

5、创建一个webpack模板的新项目
vue init
template-name：选取的模板名称
project-name：项目名称

webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.

官方还有很多模板可供选择譬如：webpack-simple 这里就不详细介绍了有兴趣的可以去github上面看看：https://github.com/vuejs/vue-cli

 vue init webpack vue-blog

Project name:项目名称
Project description：项目描述
Author:作者
Vue build : 配置文件
Install vue-router：创建router
Use ESLint to lint your code:语法规范检查工具
Pick an ESLint preset：选择一个ESlint类型
Set unit tests：设置单元测试
Setup e2e tests with Nightwatch?：使用e2e测试框架 NightWatch

项目目录结构

build：webpack打包配置文件夹
config： 同样是打包配置的文件夹，只是职能不同
src：源码存放文件夹
static： 静态文件存放位置
test：测试代码存放位置，展开可以看到单元测试和e2e测试两个目录
.babelrc ： babel的配置文件
index.html: 单页应用的html文件
package.json: npm的配置文件，配置项目信息，需要安装的模块之类
README.md： 项目说明文档

6、启动项目

进入文件夹：cd vue-blog
下载：npm install
启动热更新服务：npm run dev

启动成功展示界面