vueJs(2.x)+router+vuex简易博客系统<一>
来源:互联网 发布:华润网络校园招聘 编辑:程序博客网 时间:2024/05/24 06:33
通过写简易博客系统来学习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:创建routerUse 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
启动成功展示界面
- vueJs(2.x)+router+vuex简易博客系统<一>
- vueJs(2.x)+router+vuex简易博客系统<二>
- vueJs(2.x)+router+vuex简易博客系统<三>
- vueJs(2.x)+router+vuex简易博客系统<四>
- vueJs(2.x)+router+vuex简易博客系统<五>
- vueJs(2.x)+router+vuex简易博客系统<七> 整合vuex
- vueJs(2.x)+router+vuex简易博客系统<六> 整合axios
- vue2+vuex+vue-router 快速入门(一) 简单介绍
- Vue+Vuex+Router
- vuejs组件状态管理Vuex
- vuejs国际化插件vuex-i18n
- Vuejs全家桶系列 --- Vuex
- vue1x、vue-router 0.7x 迁移到 vue2 vue-router2 vueX的坑
- vue2.x Cnode社区是基于vue、vue-router、vuex、axios、es6开发
- vue2.x Cnode社区是基于vue、vue-router、vuex、axios、es6开发
- vue+vuex+router初体验
- vuejs router路由的使用
- 使用 vue2+Vuex+Router 重写饿了么点餐系统和 vue 插件简析
- 并发优化笔记
- 1122. Hamiltonian Cycle (25)
- kafka安装
- popwindow缩放显示消失动画
- PCRE is not compiled with PCRE_UTF8错误
- vueJs(2.x)+router+vuex简易博客系统<一>
- 开发框架-Spring-Spring Boot属性文件及多环境配置
- Linux更改命令提示符信息
- MASKRCNN(之三)demo.
- Git详细教程
- css3:selection
- 安装python
- IntersectionObserver API
- ubuntu16.04 anaconda 安装OpenCV 3.2