使用Vue构建中(大)型应用
想做SPA就快上车!
init
首先要起一个项目,推荐用vue-cli安装
$ npm install -g vue-cli
$ vue init webpack demo
$ cd demo
$ npm install
demo
是这个示例项目的名字
现在看到目录结构如下
下面来稍微介绍下
build
目录是一些webpack的文件,配置参数什么的,一般不用动
src
源码文件夹,基本上文件都应该放在这里。
static
生成好的文件会放在这个目录下。
test
测试文件夹,测试都写在这里
.babelrc
babel编译参数,vue开发需要babel编译
.editorconfig
看名字是编辑器配置文件,不晓得是哪款编辑器,没有使用过。
.eslintrc.js
eslint配置文件,用以规范团队开发编码规范,大中型项目很有用
.gitignore
用来过滤一些版本控制的文件,比如node_modules文件夹
index.html
主页
package.json
项目文件,记载着一些命令和依赖还有简要的项目描述信息
README.md
介绍自己这个项目的,想怎么写怎么写。不会写就参照github上star多的项目,看人家怎么写的
下面我针对自己的需要修改一些配置。你可以根据自己的需要进行修改。
首先去写.eslintrc.js。在rules中加入"indent": [1, 4, { "SwitchCase": 1 }]
因为我更喜欢4个空格表一个缩进,报警程度调整成1是因为build文件夹里有很多行是2个空格,草草的。
然后在index.html中的<app></app>
改成<div id="root"></div>
这个文件没有写入任何加载css和js的link,而依旧可以正常运行的秘诀在于webpack会在编译的时候重新调整这个文件,注入依赖,所以不用太担心。
好了,差不多了。进行下一步
添加依赖
我个人习惯写stylus,所以要加上预处理器,如果喜欢sass可以自行添加。
vue-router做前端路由管理,一个中大型项目必须要做路由管理!
vuex做数据管理,类似于flux的存在,没有vuex,中大型应用中的状态会把开发者搞死,绝对。
$ npm install --save vue-router vuex
$ npm install --save-dev stylus-loader babel-runtime
好了,到这里,依赖也加好了。剩下的就是写代码了?
不急,我先说下两个vue插件的介绍
vue-router 简明API
vue-router用起来非常的简单
入口文件(src/main.js
):
'use strict'
import Vue from 'vue' // 引入vue
import Router from 'vue-router' // 引入vue-routerimport App from './App' // 引入根组件
import routerMap from './router' // 引入路由表Vue.use(Router) // 声明使用vue-router
const router = new Router() // 创建路由
routerMap(router) // 路由表引入router.start(App, '#root') // 开启应用
看到缺了一个./router.js
文件,来,创建。
// src/router.js
'use strict'export default function (router) {router.map({'/': {name: 'index',component: require('./components/contents/hello.vue')},'/hi': {name: 'hi',// 按需加载component: function (resolve) {require(['./components/contents/hi.vue'], resolve)}}})
}
好了,路由创建成功了,顺便还搞了个按需加载。
那么在模板文件中如何使用?
很简单的,就像这样就可以了。
<!-- src/components/contents/hello.vue -->
<a class="link" v-link="{name: 'hi'}">跳转到hi</a>
还有,告诉应用哪里需要路由转换
<!-- src/App.vue -->
<div class="container"><router-view></router-view>
</div>
vuex 简明API
这里简要介绍一下状态管理的vuex
在src下创建一个文件夹叫做vuex
。里面定义三个文件。
mutation-types.js
定义类型的
actions.js
操作,可以分解成多个文件
store.js
入口文件,在根组件调用,然后所有子组件可以共享数据。
modules/headers.js
只是例子用的,一个headers的操作,需要定义数据的状态和mutation。action.js
只是分发操作。
这一块还是看源码比较容易懂。
// src/vuex/mutation-types.js
export const SET_HEADER_TITLE = 'SET_HEADER_TITLE'
// src/vuex/store.js
import Vue from 'vue'
import Vuex from 'vuex'
import headers from './modules/headers'
import createLogger from 'vuex/logger'
Vue.use(Vuex)Vue.config.debug = trueconst debug = process.env.NODE_ENV !== 'production'export default new Vuex.Store({modules: {headers},strict: debug,moddlewares: debug ? [createLogger()] : []
})
// src/vuex/actions.js
import {SET_HEADER_TITLE
} from './mutation-types'export const setTitle = makeAction(SET_HEADER_TITLE)function makeAction (type) {return ({ dispatch }, ...args) => dispatch(type, ...args)
}
// src/vuex/modules/headers.js
import {SET_HEADER_TITLE
} from '../mutation-types'const state = {title: 'default'
}const mutations = {[SET_HEADER_TITLE](state, newTitle) {state.title = newTitle}
}export default {state,mutations
}
我再说两个,一个挂载store,一个获取数据,触发操作。
挂载store
// src/App.vue
import store from './vuex/store'
import HeaderComponent from './components/header'
import FooterComponent from './components/footer'
export default {store,components: {HeaderComponent,FooterComponent}
}
获取数据及操作
// src/components/header.vue
// 从vuex拿数据,然后渲染到页面上
// 如果需要修改可以调用setTitle
import { setTitle } from '../vuex/actions'
export default {vuex: {getters: {title: state => state.headers.title},actions: {setTitle}}
}
fetch
单页应用少不了服务端交互,别老用ajax了,换fetch吧,少年!
$ npm install --save isomorphic-fetch es6-promise
// src/vuex/actions.js
require('es6-promise').polyfill()
require('isomorphic-fetch')
我在示例代码中并没有写。
fetch用起来根本不会回忆ajax时代的。
stylus
在之前的文章中安利过很多次stylus了,各种方便,这里一笔带过,喜欢的同学自然会去找文档
test
测试是非常重要的一环。要想以后不出乱子,一定要尽早写好测试。
示例代码中有少量测试,推荐看一下
Code
我还是决定不在文章里写代码了。
多端
vue创作的应用不仅可以跑在浏览器里,还可以通过electron以客户端的形式跑起来!
是不是吊吊的。
至于移动端,听闻阿里内部有在开发Weex,类vue的api。等待开源吧。
未来
未来js的前途肯定是不错的!加油~
使用Vue构建中(大)型应用相关推荐
- Vue 2 中,使用Vite作为前端构建开发工具,替代webpack(一)——vite.config.js配置文件
Vue 2 中,使用Vite作为前端构建开发工具,替代webpack(一)--vite.config.js配置文件 当前版本 vite@2.3.7和vite@2.4.4 "vite" ...
- Vue+Echarts构建可视化大数据平台实战项目(上)粒子动效,登录界面抖动,背景图轮播★
Vue+Echarts构建可视化大数据平台实战项目(上) 前言 分享之前我们先来普及一下什么是数据可视化?数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理.数据可视化通俗来说就 ...
- (上)Vue+Echarts构建可视化大数据平台实战项目分享(附源码)
前言 分享之前我们先来普及一下什么是数据可视化?数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理.数据可视化通俗来说就是:数据的展示.处理和分析.目的是借助于图形化手段,清晰有 ...
- axios下载大文件_用Vue构建一个github“可视化大数据平台”
GitDataV,是一个github"大数据可视化平台",通过它你可以更直观的看到你在github里的一些数据,(之所以打双引号,是因为我觉得这个还没到大数据可视化的程度).其实我 ...
- Vue项目中遇到了大文件分片上传的问题
Vue项目中遇到了大文件分片上传的问题,之前用过webuploader,索性就把Vue2.0与webuploader结合起来使用,封装了一个vue的上传组件,使用起来也比较舒爽. 上传就上传吧,为什么 ...
- vue 项目中H5页面,实现大转盘活动
vue 项目中H5页面,实现大转盘活动 <template><div class="about"><div id="app"> ...
- vue项目中使用swiper实现中间大,两边小的轮播图
前言 项目中使用的vue,刚好有需求要实现轮播图,突出显示当前图片,两边展示其他图片:通过查各种资料,实现了,故在此记录下来 实现效果如下: 下面我们来看下实现步骤: 第一步:首先在项目index.h ...
- 3d饼图 vue_Vue+Echarts构建可视化大数据平台实战项目分享(附源码)(上)
前言 分享之前我们先来普及一下什么是数据可视化?数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理.数据可视化通俗来说就是:数据的展示.处理和分析.目的是借助于图形化手段,清晰有 ...
- [转]Vue生态系统中的库
Vue UI组件库 Vuex vux github ui demo:https://github.com/airyland/vux Mint UI 项目主页:http://mint-ui.github ...
最新文章
- 35岁以后,不要成为程序员中的钻石
- byte与char区别
- java 矩形颜色_java – 如何在透明颜色的图形中制作一个矩形?
- ArcEngine创建字段集
- CNDO-INTGRL-SS-BINTGS-斯莱特轨道指数---递推方法
- HashMap,LinkHashMap和TreeMap的区别
- 2021CCPC河北省省赛F题(河南省CCPC测试赛重现)
- LOJ:相框(欧拉回路、分类讨论)
- TiDB备份恢复方式你知多少?
- cocos creator 安卓原生平台环境_cocos creator原生平台下载文件并保存到本地
- 通用 CRUD 接口
- spring mvc实例
- asp.net ajax 1.0中detailview与updatepanel混合使用的例子
- Netty网络编程聊天项目
- 【数据结构笔记28】C实现:图练习-选择最长路径最短的节点
- IT 人的国庆大阅兵,太好好好好好好看了吧 ……
- 大学生咖啡网页制作教程 表格布局网页模板 学生HTML静态美食网页设计作业成品 简单网页制作代码 学生美食网页作品免费设计
- 微信、QQ可正常使用,但浏览器打不开网页解决办法
- Flash Player 更新后视频卡问题
- Suse12网络设置