此文档为前端开发基于vue框架搭建的一套可直接使用的前端架构

此文档为前端开发基于vue框架搭建的一套可直接使用的前端架构

web前端vue架构开发文档

1、简介

此文档为前端开发基于vue框架搭建的一套可直接使用的前端架构。

1.1 框架

Vue+webpack+nginx反向代理+vantUI+sass+node

1.2 目的

目的在于搭建一套可直接用来开发开后端分离项目的架构。

2、目录结构

frendEnds│ .babelrc // 按需引入vant中的组件│ babel.config.js // 按需引入vant中的组件│ package-lock.json // 锁定安装时的包的版本号和来源│ package.json // 依赖的版本管理│ README.md // 项目说明手册│ vue.config.js // 配置文件│ yarn.lock // 由yarn管理，自动生成。如用npm不会影响│ ├─public // vue cli自动将index.html放入public中│ favicon.ico // 网站头像│ index.html // 总的入口文件，挂在id为app的div下动态渲染路由模板│ └─src │ App.vue // 是vue的主组件，所有页面都是在App.vue下进行切换的 │ main.js // js入口文件，影响全局，作用是引入全局使用的库、公共的样式和方法、设置路由等 │ ├─api // 放置与后台 api 相关的文件 │ axiosConfig.js // axios 库的实例配置文件、使用配置的 axios 实例接入 api 获取数据的函数的集合的文件 │ http.js // 后台数据接口统一管理文件 │ ├─assets // 静态资源 │ ├─fonts // 阿里iconfont字体图标库 │ │ demo.css │ │ demo_index.html │ │ iconfont.css │ │ iconfont.eot │ │ iconfont.js │ │ iconfont.json │ │ iconfont.svg │ │ iconfont.ttf │ │ iconfont.woff │ │ iconfont.woff2 │ │ │ ├─images // 图片存放 │ │ gray_2.png │ │ logo.png │ │ pep.png │ │ │ └─styles // 样式 │ │ 404.scss │ │ about.scss │ │ common.scss │ │ home.scss │ │ login.scss │ │ read.scss │ │ │ ├─components // 放置公共组件的样式 │ │ count.scss │ │ headerNav.scss │ │ loading.scss │ │ tab.scss │ │ │ └─variable // 放置全局公共变量样式 │ variable.scss │ ├─components // 放置公共组件 │ Count.vue │ HeaderNav.vue │ Loading.vue │ Tab.vue │ ├─markdown // 放置.md文件描述 │ pep_dev.md │ ├─router // 放置路由设置文件，指定路由对应的组件 │ index.js │ ├─store // 放置vuex需要的状态关联文件，设置公共的 state、mutations 等 │ │ index.js │ │ │ ├─modules // 模块化 │ │ count.js │ │ │ └─mutationsType // mutationsType名字统一管理，得于排错 │ index.js │ ├─utils // 全局可引用的工具包、公共的js方法 │ cookie.js │ filter.js │ rem.js │ └─views // 放置主要页面的组件。例如登录页、用户信息页等。通常是这里的组件本身写入一些结构，再引入通用模块组件，形成完整的页面 ├─404 │ index.vue │ ├─About │ index.vue │ ├─Home │ index.vue │ ├─Login │ index.vue │ └─Read index.vue

3、架构配置

3.1 全局配置main.js

项目的js入口文件

3.2 页面配置

3.2.1 组件引入

组件引入需要三个步骤:

引入组件

import HeaderNav from '@/components/HeaderNav'

注册组件

components: { HeaderNav }

使用组件

首页

3.2.2 样式引入

3.3 vue.config.js

VUE CLI官网： https://cli.vuejs.org/zh/config/

3.3.1 vue-cli配置

使用vue-cli3.0搭建项目比之前更简洁，没有了build和config文件夹。

vue-cli3的一些服务配置都迁移到CLI Service里面了，对于一些基础配置和一些扩展配置需要在根目录新建一个vue.config.js文件进行配置。

3.3.2 配置项注解

参考网址：https://jianshu.com/p/b358a91bdf2d

/** * 配置项注解 */ module.exports = { // 部署应用时的基本 URL baseUrl: process.env.NODE_ENV === 'production' ? '192.168.60.110:8080' : '192.168.60.110:8080', // build时构建文件的目录 构建时传入 --no-clean 可关闭该行为 outputDir: 'dist', // build时放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 assetsDir: '', // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。 indexPath: 'index.html', // 默认在生成的静态资源文件名中包含hash以控制缓存 filenameHashing: true, // 构建多页面应用，页面的配置 pages: { index: { // page 的入口 entry: 'src/index/main.js', // 模板来源 template: 'public/index.html', // 在 dist/index.html 的输出 filename: 'index.html', // 当使用 title 选项时，template 中的 title 标签需要是 title: 'Index Page', // 在这个页面中包含的块，默认情况下会包含 // 提取出来的通用 chunk 和 vendor chunk。 chunks: ['chunk-vendors', 'chunk-common', 'index'] }, // 当使用只有入口的字符串格式时，模板会被推导为 `public/subpage.html`，并且如果找不到的话，就回退到 `public/index.html`。 // 输出文件名会被推导为 `subpage.html`。 subpage: 'src/subpage/main.js' }, // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码 (在生产构建时禁用 eslint-loader) lintOnSave: process.env.NODE_ENV !== 'production', // 是否使用包含运行时编译器的 Vue 构建版本 runtimeCompiler: false, // Babel 显式转译列表 transpileDependencies: [], // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建 productionSourceMap: true, // 设置生成的 HTML 中 和

child.vue

prop验证

5.4 子组件如何将数据传到父组件中

子组件的变化通过 emit 事件的形式通知到父组件，父组件通过监听子组件的emit事件来知晓变化。

例子：

father.vue

child.vue

5.5 非父子组件间的通讯

可以使用状态管理模式 vuex,来管理组件之间状态的共享。可以用过一个vue实例Bus作为媒介，要相互通信的兄弟组件之中，都引入Bus，之后通过分别调用Bus事件触发emit和̲监听on来实现组件之间的通信和参数传递。类似与子传父，只不过是利用一个新的vue示例作为媒介，而不是当前vue示例(this)

例子：

bus.js

mport Vue from 'vue';export default new Vue;

a.vue

b.vue

6. 插件

6.1 Vue-router 路由

6.1.1 插件简介

6.1.2 插件使用

引入

import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)

6.1.3 开始一个使用

6.1.4 命名视图

在同级同时展示多个视图，而不是嵌套展示

6.1.5 动态路径

匹配到的所有路由，全都映射到同一个组件

路径：/read /:readId readId为动态路径参数

获取参数：路由信息对象的params

6.1.6 构造选项配置

routes 用来配置路由对应信息 mode 配置路由模式 hash | history base 应用的基路径 linkActiveClass 激活路由的class 类名 scrollBehavior 滚动行为

本架构中配置如下：

const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes, scrollBehavior(to, from, savePosition){ if(savePosition){ return savePosition; } else { return {x: 0, y:0} } }})

6.1.7 router-link配置项

6.1.8 对组件注入

通过在 Vue 根实例的 router 配置传入 router 实例

$router router实例对象$route 当前激活的路由信息对象，每个组件实例都会有。beforeRouteEnter() 进入组件前钩子函数beforeRouteLeave() 离开组件前钩子函数

6.1.9 过渡动画（以淡入淡出为例子）

提供了transition的封装组件，添加过渡动画

添加删除css类名

template区域

style区域

.fadeIn-enter { opacity: 0;}.fadeIn-enter-active { transition: all .2s linear; opacity: 1;}.fadeIn-leave-active { transition: all .2s linear; opacity: 0;}

官网动画传送门

https://router.vuejs.org/zh/guide/advanced/transitions.html#%E5%8D%95%E4%B8%AA%E8%B7%AF%E7%94%B1%E7%9A%84%E8%BF%87%E6%B8%A1

https://github.com/vuejs/vue-router/blob/dev/examples/transitions/app.js

过渡的css类名

v-enter: 定义进入过渡的开始状态v-enter-active: 定义进入活动状态v-enter-to: 定义进入的结束状态v-leave: 定义离开过渡的开始状态v-leave-active: 定义离开活动状态v-leave-to: 定义离开的结束状态

使用name属性改变类名前缀

过渡模式

in-out: 新元素先进行过渡，完成之后当前元素过渡离开 out-in: 当前元素先进行过渡，完成之后新元素过渡进入

6.1.10 路由元信息

在路由配置中meta可以配置一些数据，用在路由信息对象中

访问meta中数据：$route.meta

本架构中使用如下：

6.1.11 编程式导航

借助于 router 的实例方法，通过编写代码来实现导航的切换

back 回退一步forward 前进一步go 指定前进回退步数push 导航到不同url，向 history 栈添加一个新的记录replace 导航到不同url，替换 history 栈中当前记录

6.1.12 导航钩子函数

导航发生变化时，导航钩子主要用来拦截导航，让它完成跳转或取消

执行钩子函数位置

router全局单个路由组件中

钩子函数

router实例上：beforeEach、afterEach单个路由中：beforeEnter组件内的钩子：beforeRouteEnter、beforeRouteUpdate 、beforeRouteLeave

钩子函数接收的参数

to: 要进入的目标 路由对象 到哪里去from: 正要离开导航的路由对象 从哪里来next: 用来决定跳转或取消导航

6.1.13 懒加载

把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件

Vue异步组件

{ components: { custom: (resolve,reject) => {} }}

webpack代码分割功能

require.ensure代码分块require.ensure(依赖,回调函数,[chunk名字])import函数

6.1.14 服务器配置

Nginx配置

location / { root /home/我的应用跟目录; try_files $uri $uri/ /index.html =404;}

Appache配置

RewriteEngine On RewriteBase / RewriteRule ^index\.html$ [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L]

6.2 Vuex状态管理

6.2.1 插件简介

Vuex是什么 专为 Vue.js 应用程序开发的 状态管理模式采用集中式存储管理应用的所有组件的状态以相应的规则保证状态以一种可预测的方式发生变化 状态 组件内部状态：仅在一个组件内使用的状态(data 字段)应用级别状态：多个组件共用的状态 什么情况下使用Vuex 多个视图依赖于同一状态来自不同视图的行为需要变更同一状态 网址

https://vuex.vuejs.org/zh/

6.2.2 插件使用

安装vuex模块

npm install vuex --save

作为插件使用

Vue.use(Vuex)

定义容器

new Vuex.Store()

main.js注入根实例

new Vue({ router, store, render: h => h(App)}).$mount('#app')

6.2.3 Vuex核心概念

store：类似容器，包含应用的大部分状态, 一个页面只能有一个store, 状态存储是响应式的,不能直接改变 store 中的状态，唯一途径显式地提交mutations State: 包含所有应用级别状态的对象 Getters: 在组件内部获取 store 中状态的函数 Mutations: 唯一修改状态的事件回调函数 Actions: 包含异步操作、提交mutation改变状态 Modules： 将 store 分割成不同的模块

6.2.4 Vuex的流程图

6.2.5 此架构中vuex的使用

目录结构

将store分modules引用，便于管理

在每个模块中定义

export default{ state: { count: 100},getters: { filterCount: (state) => state.count >= 120 ? 120 : state.count},mutations: {},actions: {}}

将mutaions中的名称抽离，统一管理，利于排错

export const INCREMENT = 'INCREMENT'; // 增加export const DECREMENT = 'DECREMENT'; // 减少

6.2.6 Vuex辅助函数

使用，直接引入解构赋值

import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'

辅助函数中的调用：

mapState

...mapState('count', ['count'])

mapGetters

computed: {...mapGetters('count', { num2: 'filterCount'}),...mapState('count', ['count'])}

mapMutations

...mapMutations('count', { // 使用辅助函数再传参，需要在@click方法调用时传参 deHandle: Types.DECREMENT})

mapActions

...mapActions('count', { addHandle: 'addAction'}),

6.2.7 vuex中logger插件使用

引用 Stroe/index.js 中使用 import

import logger from 'vuex/dist/logger'

在实例的plugins中注册 plugins: [logger()]

此架构中代码：

export default new Vuex.Store({ strict: true, // 只能通过mutations来更改状态，不支持异步 modules: { count }, plugins: [logger()] // 打印vuex日志插件})

6.3 qs

6.3.1 插件简介

介绍 具有嵌套支持的querystring解析器，具有一些附加安全性的querystring解析和字符串化库。网址

https://github.com/ljharb/qs

安装

npm install qs

6.3.2 插件使用

使用

import qs from "qs"var assert = require('assert');var obj = qs.parse('a=c');assert.deepEqual(obj, { a: 'c' });var str = qs.stringify(obj);assert.equal(str, 'a=c');

此架构中使用，对登录接口入参格式的使用

/ 登录export async function Login(data) { const res = await axios.post("user/ak/"+window.platform_key+"/login.anys", qs.stringify(data)); return res.data;}

6.4 Axios 简洁且高效的http库

6.4.1 插件简介

介绍

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 的服务端通信库。

特征

支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 动转换JSON数据

网址

https://github.com/axios/axios

http://axios-js.com/ axios中文网

安装命令

npm install axios 或 yarn add axios

推荐数据模拟网址

http://easy-mock.com

6.4.2 插件使用

在需要的模块中引入

import Vue from 'vue'import axios from 'axios'

此架构中使用如下

export async function Read() { const res = await axios.get('/static/repository/audio_res.json'); return res.data;}

语法

axios(config)

axios[method]()

返回值为promise

支持的请求方式

axios.get(url[, config]) axios.post(url[, data[, config]]) axios.delete(url[, config]) axios.head(url[, config]) axios.options(url[, config]) axios.put(url[, data[, config]]) axios.patch(url[, data[, config]])

自定义请求实例

创建

axios.create(config)

配置

{ baseURL: '', timeout: 1000, headers: {}, responseType:'json', params:{}, transformRequest:[] 只适合PUT、POST和PATCH transformResponse:[] validateStatus:function(){} cancelToken}

取消请求

创建取消请求令牌

var CancelToken = axios.CancelToken;var source = CancelToken.source();

配置

cancelToken: source.token

捕获取消错误

if (axios.isCancel(error)) { console.log(error.message);}

调用取消

source.cancel('操作被用户取消')

并发请求

axios.all(iterable)axios.spread(callback)

-

全局- 拦截请求 axios.interceptors.request.use（function（config）{ //在发送请求之前做某事 return config; }，function（error）{ //请求错误时做些事 return Promise.reject（error）; }）;拦截响应 axios.interceptors.response.use() 取消拦截

axios.interceptors.request.eject(myInterceptor);

6.5 Vant

6.5.1 插件简介

介绍

轻量、可靠的移动端Vue组件库，来自有赞

网址

https://github.com/youzan/vant

https://youzan.github.io/vant/#/zh-CN/intro

6.5.2 插件引入和使用

安装

npm i vant –S or yarn add vant

按需引入组件

在.babelrc 中添加配置

{ "plugins": [ ["import", { "libraryName": "vant", "libraryDirectory": "es", "style": true }] ]}

babel.config.js 中配置

module.exports = { plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant'] ]};

main.js中配置 将按需引用的组件直接填写在此处

// vant框架按需引入组件import { CellGroup, Field, NumberKeyboard, Button, Search , Row, Col, Tab, Tabs, Popup, Skeleton, Swipe, SwipeItem, Lazyload, Pagination, Slider } from 'vant';const vantComponents = [];vantComponents.push(CellGroup, Field, NumberKeyboard, Button, Search , Row, Col, Tab, Tabs, Popup, Skeleton, Swipe, SwipeItem, Lazyload, Pagination, Slider);vantComponents.forEach(item => { Vue.use(item);})

6.6 Sass

6.6.1 插件简介

介绍

一款成熟、稳定、强大的专业级css扩展语言

网址

https://sass.hk/

安装

npm install -g sass

6.6.2 插件使用

公共组件使用

参考Vue CLI官网 https://cli.vuejs.org/zh/guide/css.html#%E5%90%91%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8-loader-%E4%BC%A0%E9%80%92%E9%80%89%E9%A1%B9

在vue.config.js中配置

module.exports = { css: { loaderOptions: { // 给 sass-loader 传递选项 sass: { // @/ 是 src/ 的别名 // 所以这里假设你有 `src/variables.sass` 这个文件 prependData: `@import "~@/assets/styles/variable/variable.scss";` } } }}

组件样式引用

6.7 animate.css

6.7.1 插件简介

介绍

一款强大的预设css3动画库

网址

https://github.com/daneden/animate.css

安装

npm install animate.css –save or yarn add animate.css

6.7.2 插件使用

引入 在main.js中直接引入

import 'animate.css'

要给添加动画的标签添加class

7. 调试

7.1 使用Chrome扩展插件vue-devtools进行调试

Github-：https://github.com/vuejs/vue-devtools

6.7.2 使用vuex中looger可在console控制台中查看状态

8. vue ui图形化界面

vue-cli 3.x新增vue ui图形化界面，Vue的升级我认为最厉害之处在于建设了一个属于vue的资源生态圈，把能使用的资源收归起来管理，控制台的ui不仅非常舒服，功能也十分强大

在2.x中的命令控制在此ui可视化界面中同样可以完成所有操作。

8.1 全局安装vue-cli

yarn global add @vue/cli// 检查安装是否成功vue -V// 4.1.1

8.2 初始化 vue ui

执行命令：

vue ui

8.3 项目、创建、导入

在此界面可直接创建和导入，我选择将此架构导入，如图

8.3.1 左侧菜单介绍

插件：可以从插件商店搜索并-安装各种网上的插件

依赖：对已安装对插件配置管理

配置： vue cli的配置，功能是对vue.config.js的映射

任务：就是项目可运行的命令，如打包、本地调试。

9. 项目启动和打包部署

9.1 项目安装依赖

npm install or yarn install

9.2 开发环境运行

npm run serve or yarn run serve

9.3 正式环境打包vue.config.js配置

在vue.config.js中module.exports中添加publicPath，如下：

module.exports = { publicPath:'/pep_vue/', devServer: { host: '0.0.0.0', // 设置主机地址 port: 9080, // 设置默认端口 open: true, // 启动项目自动打开浏览器 proxy: { // 设置代理 '/api/': { target: 'https://xxx.pep-/', // 设置你调用的接口域名 ws: true, // 是否要代理 websockets secure: false, // 如果是https接口，需要配置这个参数 changeOrigin: true, // 是否跨域 pathRewrite: { '^/api': '/' // 这里可以理解为用'/api'来代替target里面的地址，例如我们调用https://xxx.pep-/static/textbook/audio_res.json，直接写成'/api/static/textbook/audio_res.json' } } } }, css: { loaderOptions: { // 给 sass-loader 传递选项 sass: { // @/ 是 src/ 的别名 // 所以这里假设你有 `src/variables.sass` 这个文件 prependData: `@import "~@/assets/styles/variable/variable.scss";` } } }}

9.4 项目打包

npm run build or yarn build

9.5 项目部署，服务器Nginx配置

location / {root /home/我的应用跟目录;try_files $uri $uri/ /index.html =404;}

9.6 线上demo

http://62.234.25.173/pep_vue/

感谢支持，如有问题随时指出，谢谢~

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。