使用Vue构建中(大)型应用

Rindia 发布于2019-08-19 17:59 / 1392人阅读

摘要：做前端路由管理，一个中大型项目必须要做路由管理做数据管理，类似于的存在，没有，中大型应用中的状态会把开发者搞死，绝对。

想做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中的改成

这个文件没有写入任何加载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-router

import 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)
            }
        }
    })
}

好了，路由创建成功了，顺便还搞了个按需加载。

那么在模板文件中如何使用？

很简单的，就像这样就可以了。


跳转到hi

还有，告诉应用哪里需要路由转换

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 = true

const 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 中使用 webrtc vue中使用webrtc 大数据在新零售中的应用大数据在纺织服装行业中的应用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79045.html

学习meteor时遇到的问题

摘要：简单记录一下学习时遇到的问题，将会持续更新基于的前端方案方案大概有后端模板结合型和前端后端分离型两种，支持的包也比较多，目前尤大推荐使用的方案相对靠谱。简单记录一下学习meteor时遇到的问题，将会持续更新！基于meteor的前端方案方案大概有后端模板结合型和前端后端分离型两种，支持的包也比较多，目前尤大推荐使用webpack:webpack的方案相对靠谱。博主自己写的例子：m...

lemanli 2019-08-21 14:07 评论0 收藏0
浅谈NUXT - 基于vue.js的服务端渲染框架

摘要：是一款基于的服务端渲染框架，跟的异曲同工。该配置项用于定义应用客户端和服务端的环境变量。 Vue因其简单易懂的API、高效的数据绑定和灵活的组件系统，受到很多前端开发人员的青睐。国内很多公司都在使用vue进行项目开发，我们正在使用的简书，便是基于Vue来构建的。我们知道，SPA前端渲染存在两大痛点：（1）SEO。搜索引擎爬虫难以抓取客户端渲染的页面meta信息和其他SEO相关信息，使...

yearsj 2019-08-01 17:18 评论0 收藏0
浅谈NUXT - 基于vue.js的服务端渲染框架

摘要：是一款基于的服务端渲染框架，跟的异曲同工。该配置项用于定义应用客户端和服务端的环境变量。 Vue因其简单易懂的API、高效的数据绑定和灵活的组件系统，受到很多前端开发人员的青睐。国内很多公司都在使用vue进行项目开发，我们正在使用的简书，便是基于Vue来构建的。我们知道，SPA前端渲染存在两大痛点：（1）SEO。搜索引擎爬虫难以抓取客户端渲染的页面meta信息和其他SEO相关信息，使...

godiscoder 2019-08-20 18:29 评论0 收藏0
angular，react & vue

摘要：由进行开发和维护，代发布于年月，现在主要是。状态是只读的，只能通过来改变，以避免竞争条件这也有助于调试。文件大小为，而为，为。请记住，性能基准只能作为考虑的附注，而不是作为判断标准。使用的人员报告说，他们永远不必阅读库的源代码。本文当时写在本地，发现换电脑很不是方便，在这里记录下。 angular，react & vue 2018/07/23 2016年，对于JavaScript来说...

jiekechoo 2019-08-23 18:02 评论0 收藏0
也许你并不需要第三方小程序框架

摘要：所以在小程序出现之后，一股框架之风也很快的出现，微信小程序刚推出之后，就出现了两个比较出名的小程序开发框架，。原文地址：https://ant-move.github.io/we... 这里说的去除小程序框架其实并不严谨，因为小程序本身也算是一个框架，而且是一个功能更加完善的框架系统。在前端的概念中，我们一般说一个框架是指一个用来帮助开发者构建用户界面的框架，而小程序框架本身不仅仅包...

red_bricks 2019-08-26 10:43 评论0 收藏0