通过写简易博客系统来学习vue全家桶的使用
项目基础搭建
技术选型
前端
- vue.js(2.x)这里就不介绍它的基础了,可以看下官网的api写的非常清晰易懂
- vue-router@2.x 路由,注意: vue-router@2.x 只适用于 Vue 2.x。
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
启动成功展示界面