vue建站模板(Vue模板引擎) - 众诚企业建站服务

vue模板，钩子函数

vue脚手架：在vue脚手架中有一个template 模板：在模板里面只有一个子类，子类里面可以有其他的类script? 脚本：style 样式vue的语法：当使用{{}}的时候，里面只可以传入文本，如果传入标签也会被认为文本；v-html：可以传入标签，设置属性的时候，使用v-bind:id 可以简写为? :id = 'id'在html中的变量都需要在data里面进行定义在{{}}里面可以使用表达式v-if 与 v-else：如果if条件成立的话，就会显示if里面的内容，如果没有成立的话，就会显示else里面的内容，v-show? 条件成立就显示内容，条件不成立，不会显示内容。他会修改display属性vue中的钩子函数：一个指令定义对象可以提供如下几个钩子函数 (均为可选)：bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。unbind：只调用一次，指令与元素解绑时调用。指令钩子函数会被传入以下参数：el：指令所绑定的元素，可以用来直接操作 DOM 。binding：一个对象，包含以下属性：name：指令名，不包括?v-?前缀。value：指令的绑定值，例如：v-my-directive="1 + 1"?中，绑定值为?2。oldValue：指令绑定的前一个值，仅在?update?和?componentUpdated?钩子中可用。无论值是否改变都可用。expression：字符串形式的指令表达式。例如?v-my-directive="1 + 1"?中，表达式为?"1 + 1"。arg：传给指令的参数，可选。例如?v-my-directive:foo?中，参数为?"foo"。modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar?中，修饰符对象为?{ foo: true, bar: true }。vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。oldVnode：上一个虚拟节点，仅在?update?和?componentUpdated?钩子中可用。除了?el?之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。使用vue计算属性:

Vue3基础-模板语法

如果我们希望把数据显示到模板（template）中，使用最多的语法是 “Mustache”语法 (双大括号) 的文本插值。并且我们前端提到过，data返回的对象是有添加到Vue的响应式系统中，当data中的数据发生改变时，对应的内容也会发生更新。当然，Mustache中不仅仅可以是data中的属性，也可以是一个JavaScript的表达式：下面这种写法是语句不是表达式，所以是错误的：v-once用于指定元素或者组件只渲染一次，当数据发生变化时，元素或者组件以及其所有的子元素将视为静态内容并且跳过，该指令可以用于性能优化。如果添加到父节点，那么所有的子节点也是只会渲染一次：用于更新元素的 textContent，等价于"Mustache"语法，而且"Mustache"语法更灵活。默认情况下，如果我们展示的内容本身是 html 的，那么vue并不会对其进行特殊的解析。如果我们希望这个内容被Vue可以解析出来，那么可以使用 v-html 来展示。v-pre用于跳过元素和它的子元素的编译过程，显示原始的Mustache标签。跳过不需要编译的节点，加快编译的速度。这个指令保持在元素上直到关联组件实例结束编译。v-cloak 和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到组件实例准备完毕，主要用于解决闪动问题，现在Vue3一般不会出现这个问题了。

不会显示，直到编译结束。前面讲的一系列指令，主要是将值插入到模板内容中。但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定。比如动态绑定a元素的href属性，动态绑定img元素的src属性。绑定属性我们使用 v-bind: ，缩写 : ，用于动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值（这个学到组件时再介绍），在开发中，有哪些属性需要动态进行绑定呢？还是有很多的，比如图片的链接src、网站的链接href、动态绑定一些类、样式等等。v-bind有一个对应的语法糖，也就是简写方式，在开发中，我们通常会使用语法糖的形式，因为更简洁。：Vue2 template模板中只能有一个根元素，Vue3 template模板中允许有多个根元素。在开发中，有时候我们的元素class也是动态的，比如：当数据为某个状态时，字体显示红色，当数据另一个状态时，字体显示黑色。绑定class有两种方式：对象语法，数组语法。① 对象语法：我们可以传给 :class (v-bind:class 的简写) 一个对象，以动态地切换 class。② 数组语法：我们可以把一个数组传给 :class，以应用一个 class 列表；我们可以利用v-bind:style来绑定一些CSS内联样式，这是因为某些样式我们需要根据数据动态来决定，比如某段文字的颜色，大小等等。CSS属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名。绑定style有两种方式：对象语法，数组语法。① 对象语法：② 数组语法： :style 的数组语法可以将多个样式对象应用到同一个元素上在某些情况下，我们属性的名称可能也不是固定的。前面我们无论绑定src、href、class、style，属性名称都是固定的，如果属性名称不是固定的，我们可以使用 :[属性名]=“值” 的格式来定义，这种绑定的方式，我们称之为动态绑定属性。如果我们希望将一个对象的所有属性，绑定到元素上的所有属性，应该怎么做呢？非常简单，我们可以直接使用 v-bind 绑定一个对象。如下：info对象会被拆解成div的各个属性。前面我们绑定了元素的内容和属性，在前端开发中另外一个非常重要的特性就是交互。在前端开发中，我们需要经常和用户进行各种各样的交互，这个时候，我们就必须监听用户发生的事件，比如点击、拖拽、键盘事件等等。在Vue中如何监听事件呢？使用v-on指令。接下来我们来看一下v-on的用法：我们可以使用v-on来监听一下点击的事件：v-on:click可以写成@click，是它的语法糖写法：当然，我们也可以绑定其他的事件：如果我们希望一个元素绑定多个事件，这个时候可以传入一个对象：当通过methods中定义方法，以供@click调用时，需要注意参数问题：情况一：如果该方法不需要额外参数，那么方法后的()可以不添加，并且方法的实现不用参数，直接就可以打印event。情况二：如果需要同时传入某个参数和event时，可以通过$event传入事件，并且方法的实现必须按顺序写明参数。@keyup.enter 代表enter键弹起的时候会调用onEnter方法，我们一般在方法里面获取输入的值：在某些情况下，我们需要根据当前的条件决定某些元素或组件是否渲染，这个时候我们就需要进行条件判断了。Vue提供了下面的指令来进行条件判断：下面我们来对它们进行学习。v-if、v-else、v-else-if 用于根据条件来渲染某一块的内容，这些内容只有在条件为true时，才会被渲染出来，这三个指令与JavaScript的条件语句 if、else、else if 类似。v-if 的渲染原理：v-if是惰性的，当条件为false时，其判断的内容完全不会被渲染或者会被销毁掉，当条件为true时，才会真正渲染条件块中的内容。因为v-if是一个指令，所以必须将其添加到一个元素上，但是如果我们希望切换的是多个元素呢？如果此时我们使用div包裹，div会被渲染到界面上来，但是我们并不希望div被渲染，这个时候，我们可以选择使用template，template元素可以当做不可见的包裹元素，并且 v-if 可以添加到 template 上，但是最终template不会被渲染出来，类似于小程序中的block。v-show和v-if的用法看起来是一致的，也是根据一个条件决定是否显示元素或者组件。首先，在用法上的区别：其次，本质的区别：开发中如何进行选择呢？在真实开发中，我们往往会从服务器拿到一组数据，并且需要对其进行渲染。这个时候我们可以使用v-for来完成，v-for类似于JavaScript的for循环，可以用于遍历一组数据。v-for的基本格式是 "item in 数组" ，数组通常是来自data或者prop，也可以是其他方式，item是我们给每项元素起的一个别名，这个别名可以自定来定义。我们知道，在遍历一个数组的时候会经常需要拿到数组的索引，如果我们需要索引，可以使用格式 "(item, index) in 数组" ，注意顺序，数组元素项item在前面，索引项index在后面。类似于v-if，你可以使用 template 元素来循环渲染一段包含多个元素的内容。我们使用template来对多个元素进行包裹，而不是使用div来完成，因为div会被渲染，template不会被渲染。而且如果有ul，ul里面不推荐放div，只推荐放li。Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新，这些被包裹过的方法包括：上面的方法会直接修改原来的数组，所以视图会跟着更新。但是某些方法不会替换原来的数组，而是会生成新的数组，比如 filter()、concat() 和 slice()，这时候我们可以通过重新赋值的方式触发视图更新，如下：在使用v-for进行列表渲染时，我们通常会给元素或者组件绑定一个key属性。这个key属性有什么作用呢？我们先来看一下官方的解释：key属性主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes。如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法，而使用key时，它会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的元素。官方的解释对于初学者来说并不好理解，比如下面的问题：什么是新旧nodes，什么是VNode？没有key的时候，如何尝试修改和复用的？有key的时候，如何基于key重新排列的？我们先来解释一下VNode的概念：VNode的全称是Virtual Node，也就是虚拟节点。事实上，无论是组件还是元素，它们最终在Vue中表示出来的都是一个个VNode。VNode的本质是一个JavaScript的对象。如果我们不只是一个简单的div，而是有一大堆的元素，那么它们应该会形成一个VNode Tree。我们先来看一个案例：这个案例是当我们点击按钮时会在li中间插入一个f。我们可以确定的是，这次更新对于ul和button是不需要进行更新，需要更新的是我们li的列表。在Vue中，对于相同父元素的子元素节点并不会重新渲染整个列表，因为对于列表中 a、b、c、d它们都是没有变化的。在操作真实DOM的时候，我们只需要在中间插入一个f的li即可。那么Vue中对于列表的更新究竟是如何操作的呢？Vue事实上会对于有key和没有key会调用两个不同的方法，有key，那么就调用 patchKeyedChildren方法，没有key，那么就调用 patchUnkeyedChildren方法。没有key的diff算法：我们会发现上面的diff算法效率并不高，c和d来说它们事实上并不需要有任何的改动，但是因为我们的c被f所使用了，所有后续所有的内容都要一次进行改动，并且最后进行新增。有key的diff算法：所以我们可以发现，Vue在进行diff算法的时候，会尽量利用我们的key来进行优化操作，在没有key的时候我们的效率是非常低效的，在进行插入或者重置顺序的时候，保持相同的key可以让diff算法更加的高效。

reactjs，Vue.js，Bootstrap哪个框架用的比较多

首先你要搞清zd楚，bootstrap和reactjs，vue这些不是一个等级的。
bootstrap是一个UI框架，是一个帮助快速搭建前端模板页的东西。这个在初级前回端（依然停留在切图上的）是运用最多的。
而react和vue是js，他们定义了网站制作的新时代，抛弃了jq一直统治的dom操作方式。一般要负责大型站点，尤其单页面应答用时会用到它们。

vue.js 中如何安装bpmn.js依赖

vue推荐开发环境:
Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言
npm: Nodejs下的包管理器。
webpack: 它主要的用途是通过 CommonJS 的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。
vue-cli: 用户生成Vue工程模板

网友：vue建站模板

创建工程目录ajax插件选择模拟ajax返回数据跨域问题优化webpack配置增加babel-polyfill增加路径别名修改单页面应用根模板index.html位置修改chunk文件名完善各种类型的css-loaderNEXT——路由篇源码本系列目录创建工程目录

在开始一切的讲解前，我们先创建一个全新的工程。推荐直接使用vue官方提供的命令行工具vue-cli，它能快速的生成一个基于vue和webpack的单页面应用。

# 全局安装vue-clinpm install vue-cli -g# 选择你的项目根文件夹# e:# cd vue-project# 创建webpack项目# vue init [vue-cli模板名称] [项目文件夹]vue init webpack my-project# 安装依赖npm install12345678910111213

在安装中有自动提示，要求输入项目名称、描述、作者、关键字、是否使用eslint、是否加入单元测试。有需求的话按照提示直接输入或选择即可，没有需求的话一路按回车和Y就行了。

当完成上述步骤后，你就能够在e:vue-projectmy-project中找到自动生成完毕的项目。然后大家可以根据实际需要或者编写习惯来创建其中的具体目录。以下为参考目录：

在jQuery时代，ajax的使用一般直接用jQuery自己提供的就好。但是当使用vue作为底层开发框架时，因很少再去直接操作DOM的关系，jQuery本身就很少被提及了。所以这里推荐大家使用axios作为ajax插件，这也是vue官方所推荐的插件。axios的安装和使用都很简单，但其在项目中的具体配置会在今后的章节中涉及，此处不做详细讨论。现在我们只需要知道它能实现ajax就可以了。

模拟ajax返回数据

在实际的开发过程中，经常会遇到前端需要后端的数据，但后端并没有完成该功能的情况。这种问题有很多种解决方案，比如搭建一个前后端公用的Mock Server。不过在项目前期如果没有充足准备的话，对于前端同学来说，使用Mockjs来实现这个需求则更加方便、快速一点，和项目本身集成到一起，不用再搭建服务器了。

注意：在本地项目中集成Mockjs，只应该用于前期开发或工作比较忙的时候，后期还是应该有统一的API测试平台，保证前后端都能通过该平台测试自己的功能，并能够对API协议进行统一管理。

跨域问题

如果在开发过程中，ajax请求地址非本服务相同主机和相同端口，则会因浏览器自身的安全机制，导致出现跨域问题。解决该问题最好的方法是让后台同学配置CORS，或者在webpack中设置proxyTable，或者自己搭建nginx服务进行反向代理。

这里主要说一下关于webpack中proxyTable的设置（其实是vue-cli生成的项目自带的配置项）。请注意，webpack的proxyTable只在开发环境中有效！以下说明均引用自vue-cli对webpack模板的说明，这里为原文链接：vuejs-templates

在config/index.js中编辑dev.proxyTable项，以设置代理规则。在开发环境中，实际上使用的是http-proxy-middleware插件实现的代理功能，所以它的详细用法你应该参考其官方文档，这里有个简单的例子：

// config/index.jsmodule.exports = { // ... dev: { proxyTable: { // 所有以/api 为前缀的请求将被代理到 // 即 /api/getNav -> '/api': { target: '', changeOrigin: true, pathRewrite: { '^/api': '' } } } }}1234567891011121314151617优化webpack配置

vue-cli默认生成的项目工程虽然很全，但仍有一部分需要进行修改，以更好的适应实际开发。这里仅列举针对工程的全局修改，在实际开发中可能会有更多的修改，比如增加loader等

增加babel-polyfill

vue-cli默认生成的项目中自带了babel-plugin-transform-runtime，其保证了一定的浏览器兼容性。但其存在两个问题：

异步加载组件时，会产生 polyfill 代码冗余不支持对全局函数与实例方法的 polyfill 介于以上两种缺点，我们需要增加babel-polyfill，同时删除babel-plugin-transform-runtime

在命令行中输入以下命令

# 安装babel-polyfillnpm install babel-polyfill --save# 卸载babel-plugin-transform-runtimenpm uninstall babel-plugin-transform-runtime --save12345

修改文件.babelrc

"plugins": [ // "transform-runtime"],123

在入口文件main.js中引入babel-polyfill

import 'babel-polyfill'1

增加路径别名

在实际开发中，某些路径层级可能会很深，如果使用相对路径可能会有无数的../../。为解决这种问题，我们可以增加路径别名，以减少开发过程中路径的复杂性。

修改文件：webpack.base.conf.js

resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'util': '@/util', 'asset': '@/asset' ... }}12345678910

修改单页面应用根模板index.html位置

webpack默认的根模板路径与src目录同级。但我更喜欢把根模板放置到src目录中。如果你也有像我这样的需求，那么按以下修改即可

// 开发环境：webpack.dev.conf.jsnew HtmlWebpackPlugin({ filename: 'index.html', // template: 'index.html', template: './src/index.html', inject: true})// 生产环境`webpack.prod.conf.js`new HtmlWebpackPlugin({ filename: config.build.index, // template: 'index.html', template: './src/index.html', ...}),123456789101112131415

修改chunk文件名

如果你不希望看到各种以数字开头的文件名的话，可以按照以下方式修改。如果你觉得hash太长，也可以限定其长度

// webpack.prod.conf.jsoutput: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash].js'), // chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') chunkFilename: utils.assetsPath('js/[name].[chunkhash:7].js')}1234567

完善各种类型的css-loader

在build/utils.js 中我们可以看到，vue-cli项目自动帮我们判断了需要哪些css的loader。如果你想以后不再轻易动package.json的话，你完全可以把这些loader都安装上。其中安装sass-loader前需要提前安装node-sass。安装less-loader前需要安装less。以下为安装sass-loader和less-loader

npm install node-sass sass-loader less less-loader --save-dev1NEXT——路由篇

项目创建及配置完毕后，我们将开始编写后台管理系统中最重要也是最基础的部分——路由及其权限。基于权限的页面跳转将会是重中之重。

源码

当前源码地址：

请注意，该源码会不断更新（因为工作很忙不能保证定期更新）

模板基于 vue-cli4 和 Vant-ui 搭建，进行大型 H5 项目开发最佳实践方案，让我们来一探究竟

项目结构

本项目已经为你生成了一个完整的开发框架，下面是整个项目的目录结构。

├── .github# git log├── plop-templates# 基本模板├── public# 静态资源││── favicon.ico# favicon图标│└── index.html# html模板├── src# 源代码│├── assets# 静态资源│├── components# 全局公用组件│├── constants# 常量│├── core# 分层│├── enum# 枚举│├── filters# 全局 filter│├── icons# 项目所有 svg icons│├── lang# 国际化 language│├── layout# 全局 layout│├── router# 路由│├── store# 全局 store 管理│├── styles# 全局样式│├── utils# 全局公用方法│├── pages# pages 所有页面│├── pwa# 渐进式Web应用│├── App.vue# 入口页面│├── main.js# 入口文件加载组件初始化等│└── permission.js# 权限管理├── tests# 测试├── .editorconfig# 代码风格├── .env.xxx# 环境变量配置├── .eslintrc.js# eslint 配置项├── .sentryclirc.js# 前端异常日志监控配置├── .babel.config# babel 配置├── plopfile.js# 基本模板配置├── vue.config.js# vue-cli 配置├── postcss.config.js# postcss 配置└── package.json# package.json...安装

# 克隆项目git clone # 进入项目目录cd vue-h5-template# 安装依赖npm install# 建议不要用 cnpm 安装会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题npm install --registry=# 本地开发启动项目npm start

TIP

强烈建议不要用直接使用 cnpm 安装，会有各种诡异的 bug，可以通过重新指定 registry 来解决 npm 安装速度慢的问题。若还是不行，可使用 yarn 替代 npm。

Windows 用户若安装不成功，很大概率是node-sass安装失败，解决方案。

另外因为 node-sass 是依赖 python环境的，如果你之前没有安装和配置过的话，需要自行查看一下相关安装教程。

启动完成后会自动打开浏览器访问 :9000，你看到下面的页面就代表操作成功了。

接下来你可以修改代码进行业务开发了，本项目内建了典型业务模板、模拟数据、状态管理、国际化、全局路由等等各种实用的功能来辅助开发

常用命令

# 项目打包npm run build:xxx# 自动创建npm run new# 规范Git提交npm run git-cz# 生成CHANGELOGnpm run genlog分层架构

目前前端的一个开发趋势是以搭建单页应用 (SPA) 为主的。当应用体系比较大，或者你的应用业务逻辑足够复杂的时候，会遇到各种各样的问题，我们随便提两点：

产品需要多人协作时，每个人的代码风格和对业务的理解不同，导致业务逻辑分布杂乱无章对产品的理解停留在页面驱动层面，导致实现的技术模型与实际业务模型出入较大，当业务需求变动时，技术模型很容易被摧毁…

针对上面所遇到的问题，我们以下面这张架构图做讲解：

其中视图层/View 是大家接触最多的，想必大家都很了解，就不在这里介绍了，重点介绍其他几个层的含义：

Services 层

Services 层是用来对底层技术进行操作的，例如封装 AJAX 请求,操作浏览器 Cookie、LocaStorage、IndexedDB，操作 Native 提供的能力（如调用摄像头等），以及建立 Websocket 与后端进行交互等。

Axios 封装

.....export default async function(options) { const { url } = options const requestOptions = Object.assign({}, options) try {const { data, data: { errno, errmsg }} = await instance.request(requestOptions)if (errno) {errorReport(url, errmsg, requestOptions, data)throw new Error(errmsg)}return data } catch (err) {errorReport(url, err, requestOptions)throw err }}

IndexedDB

...export class DBRequest { instance static getInstance() {if (!this.instance) {this.instance = new DBRequest()}return this.instance } async create(options = {}) {const { name, data } = optionsconst db = await indexDB(name)return await db.add(name, data) }...}

…….

Entities 层

实体 Entity 是领域驱动设计的核心概念，它是领域服务的载体，它定义了业务中某个个体的属性和方法。区分一个对象是否是实体，主要是看他是否有唯一的标志符（例如 id）

通过上面的代码可以看到，这里主要是以实体本身的属性以及派生属性为主，当然实体本身也可以具有方法，用于实现属于实体自身的业务逻辑。

并不是所有的实体都应该按上面那样封装成一个类，如果某个实体本身业务逻辑很简单，就没有必要进行封装，例如本模板中的 Test 只是做个演示。

Interactors 层

Interactors 层是负责处理业务逻辑的层，主要是由业务用例组成

import { Request } from '@/utils/request'import { CARDS } from '@/constants/api/test'class TestHttpInteractor { service constructor(service) {this.service = service } async getTest() {try {const options = { url: CARDS }return await this.service.get(options)} catch (error) {throw error} } async createTest(data) {try {const optons = { url: CARDS, data }await this.service.post(optons)} catch (error) {throw error} }...}const testHttpInteractor = new TestHttpInteractor(Request.getInstance())export default testHttpInteractor

通过上面的代码可以看到，Sevices 层提供的类的实例主要是通过 Interactors 层的类的构造函数获取到，这样就可以达到两层之间解耦，实现快速切换 service 的目的了，当然这个和依赖注入 DI 还是有些差距的，不过已经满足了我们的需求。

另外 Interactors 层还可以获取 Entities 层提供的实体类，将实体类提供的与实体强相关的业务逻辑和 Interactors 层的业务逻辑融合到一起提供给 View 层，例如：

当然这种分层架构并不是银弹，其主要适用的场景是：实体关系复杂，而交互相对模式化，例如企业软件领域。相反实体关系简单而交互复杂多变就不适合这种分层架构了。

然后需要明确的是，架构和项目文件结构并不是等同的，文件结构是你从视觉上分离应用程序各部分的方式，而架构是从概念上分离应用程序的方式。你可以在很好地保持相同架构的同时，选择不同的文件结构方式。没有完美的文件结构，因此请根据项目的不同选择适合你的文件结构。

布局

页面整体布局是一个产品最外层的框架结构, 这里使用了 vue-router 路由嵌套, 所以一般情况下，你增加或者修改页面只会影响 app-main这个主体区域。其它配置在 layout 中的内容如：底部导航都是不会随着你主体页面变化而变化的。

/foo/bar+------------------++-----------------+| layout|| layout|| +--------------+ || +-------------+ || | foo.vue| | +------------> | | bar.vue| || || || || || +--------------+ || +-------------+ |+------------------++-----------------+

这里在 app-main 外部包了一层 keep-alive 主要是为了缓存的，如不需要可自行去除。

样式CSS Modules

在样式开发过程中，有两个问题比较突出：

全局污染 —— CSS 文件中的选择器是全局生效的，不同文件中的同名选择器，根据 build 后生成文件中的先后顺序，后面的样式会将前面的覆盖；选择器复杂 —— 为了避免上面的问题，我们在编写样式的时候不得不小心翼翼，类名里会带上限制范围的标示，变得越来越长，多人开发时还很容易导致命名风格混乱，一个元素上使用的选择器个数也可能越来越多，最终导致难以维护。

好在 vue 为我们提供了 scoped 可以很方便的解决上述问题。它顾名思义给 css 加了一个域的概念。

/* 编译前 */.example { color: red;}/* 编译后 */.example[_v-f3f3eg9] { color: red;}

只要加上 style scoped 这样 css 就只会作用在当前组件内了。

TIP

使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。

目录结构

vue-h5-template 所有全局样式都在 @/src/styles 目录下设置

├── styles│├── _animation# 按钮样式│├── index.scss# 全局通用样式│├── _mixin.scss# 全局mixin│├── _transition.scss# 过渡效果│└── variables.scss# 全局变量一次完整的与服务器端交互

在 vue-h5-template 中，一个完整的前端 UI 交互到服务端处理流程是这样的：

UI 组件交互操作调用统一管理的 api service 请求函数使用封装的 request.js 发送请求获取服务端返回更新 datarequest.js

其中，@/src/utils/request.js 是基于 Server目录的 http 的二次封装，便于统一处理 POST，GET 等请求方式。具体可以参看项目代码。

...export class Request { instance static getInstance() {if (!this.instance) {this.instance = new Request()}return this.instance } async post(options = {}) {const { data } = await service({method: 'post',...options})return data }...}例子

定义接口地址统一管理 src/constants/api/test.js

export const CARDS = '/admin/cards'

请求方法 src/core/interactors/test-interactor.js

async getTest() { try {const options = { url: CARDS }return await this.service.get(options) } catch (error) {throw error }}

请求方式 src/utils/request.js

async get(options = {}) {const { data } = await service({method: 'get',...options})return data}

TIP

目录结构不要纠结，个人习惯而定

页面使用 src/pages/test/index.vue

# 生命周期async created() {if (this.id) {await this.handleGetTest()}}# 请求async handleGetTest() { try {const test = await testInteractor.getTest(this.id)this.addressInfo = Object.assign({}, test) } catch (error) {console.log(error) }}

可能大家会觉得很繁琐，这么多文件容易搞混，重复编写代码等等，不要着急，本模板配置了自动生成文件，上述除了视图/View层这块需要你手动去编写代码，其他的我们都会去一键生成，接下来我们就来讲讲使用方法。

生成所需文件

在开发过程中,无论我们添加页面也好还是添加组件等等。都需要不停地新建 .vue文件(或者其他框架或者html/js/css文件)

以Vue项目为例, 我们新建一个component 或 view 的时候，需要新建一个.vue文件，然后写 <template>、<script>、<style>。最后写我们的业务代码。如果使用 class 风格来写 Vue 还需要在每个页面都引入 Vue 和Component

既然这种重复性的工作，而且并没有实际的操作难度，我们是学不到任何东西的，那有没有什么办法可以告别手敲呢，在这里给大家介绍一个插件 plop，它的使用方式比较简单，在这里我不做过多介绍了，大家可以查阅文档，或者直接拉取本模板进行查阅

本项目中我一个配置了5项，他们分别代表着什么呢？

module.exports = function(plop) { plop.setGenerator('page', pageGenerator)// Page plop.setGenerator('component', componentGenerator)// 组件 plop.setGenerator('store', storeGenerator)// vuex plop.setGenerator('interactor', interactorGenerator)// 业务逻辑 plop.setGenerator('db-interactor', dbInteractorGenerator)//db业务逻辑}

TIP

创建模板指令是 npm run new，记得属于目录或文件名称哦

DSBridgeDSBridge 的主要特点DSBridge 真正跨平台，官方同时支持 ios 和 android。DSBridge 支持同步调用。三端友好；无论是在 ios、android 或者 web，使用起来都非常简单优雅，这一点和 WebViewJavascriptBridge 相比，简直就是艺术。DSBridge 为国人项目，有详细中文文档和问题反馈渠道。H5 页面与 Native 之间通信跨平台；同时支持 ios 和 android。双向调用；js 可以调用 native， native 可以调用 js不仅支持异步调用，而且页支持同步调用（dsbridge 是唯一一个支持同步调用的 javascript bridge）支持进度回调，多次返回（常用于文件下载进度、计时器等）Android 支持腾讯 x5 内核三端易用；无论是前端还是 android 或 ios，使用都非常简单，极大的降低集成／学习成本环境变量与配置文件env

# 移动端控制台开(yes) | 关(no)VCONSOLE=no # 标题VUE_APP_TITLE=CHINA-GOODS-H5# 端口号DEVSERVERPORT=9000# 错误监控平台SENTRY_ENABLED=yesSENTRY_DSN='@sentry.io/3619515'SENTRY_PLUGIN_ENABLED=nosettings

export const TITLE = ''// 标题export const TOKEN_KEY = ''// token-keyexport const LANGUAGE_KEY = 'language'// 国际化...ESLint .editorconfig

不管是多人合作还是个人项目，代码规范都是很重要的。这样做不仅可以很大程度地避免基本语法错误，也保证了代码的可读性。

ESLint 所有的配置文件都在 .eslintrc.js 中。本项目基本规范是依托于 vue 官方的 eslint 规则 eslint-config-vue 做了少许的修改。大家可以按照自己的需求进行定制化配置。

代码风格在 .editorconfig，大家可以按照个人喜欢个性化修改。

图标 SVG

如果你没有在本项目 Icon 中找到需要的图标，可以到 iconfont.cn 上选择并生成自己的业务图标库，再进行使用。或者其它 svg 图标网站，下载 svg 并放到文件夹之中就可以了。

生成图标库代码

首先，搜索并找到你需要的图标，将它采集到你的购物车里，在购物车里，你可以将选中的图标添加到项目中（没有的话，新建一个），后续生成的资源/代码都是以项目为维度的。

现在本项目支持和推荐单独导出 svg 的引入使用方式。下载方式如下图：

下载完成之后将下载好的 .svg 文件放入 @/icons/svg 文件夹下之后就会自动导

更进一步优化自己的svg

已经配置指令，只需要执行相关指令就好：

npm run svgo使用方式

本项目集合了国际化 i18n 方案。通过 vue-i18n而实现。

由于本项目 ui 框架使用了 Vant UI，所以国际化的同时也要将其国际化。同时将当前 lang 语言存在 cookie之中，为了下次打开页面能记住上次的语言设置。

export const VueVantLocales = (lang = getLocale()) => { switch (lang) {case 'zh':Locale.use('zh-CN', vantZhLocale)breakcase 'en':Locale.use('en-US', vantEnLocale)break }}export default new VueI18n({ locale: getLocale(), fallbackLocale: getLocale(), messages})使用

Html 中使用：

// $t 是 vue-i18n 提供的全局方法$t('heoll')

Js 中使用：

const options = [ {value: '1',label: this.$t('i18nView.one') }, {value: '2',label: this.$t('i18nView.two') }]样式适配

由于本模板是H5开发模板，所以一定要有样式适配啦。对此目前主流方案有 vw 和 rem，我们来使用一个工具来帮助我们完成屏幕的适配，postcss-px-to-viewport，安装之后我们只需要在 postcss.config.js 配置即可，具体配置说明还请查阅文档。

调试控制台

在调试方面，本项目使用 vconsole 作为手机端调试面板，功能相当于打开 PC 控制台，可以很方便地查看 Console, Network, Element、Storage 等关键调试信息。

## 错误监控平台

对别的错误监控平台也不太了解，只记得当时在写 PHP 的时候有用过 sentry，所以本项目中就配置了它作为错误监控平台。同时使用了这个大佬的插件编译时自动在 try catch 中添加错误上报函数的 babel 插件，相关配置在 .sentryclirc 这个文件中，具体相关配置在你创建时就会给出提示。还不清楚的请查阅配置sentry

[defaults]url==组织名project=项目名[auth]token=tokenGIT 提交风格

代码提交记录是一个很好的代码修改日志。规范的代码提交记录，不管在平时代码开发维护过程中，还是在定位 bug 或者回退版本来说都是极为重要。