Vue
共 8 篇文章
按官网文档一键配置按需引入总是无法生效，目测可能是激进式预设没有选babel的原因。故写此文详细记录折腾过程，望有效！
vue ui创建新项目
选择预设，bable，eslint，vuex，vue-router(历史模式)
vue ui安装element插件
选择配置
改动的内容
自动创建了
bable.config.js,并添加了内容。创建了`@/src/plugins/element.js,设置了按需引入
改写了
app.vue,添加了element按钮组件
运行测试
加载成功
Q&A
- 为什么需要bable来支持按需加载
如果不使用bable转码，那你按需引入会找不到该组件。这是由于bable在将组件库转码的过程中把element整个组件库编译成了各种独立的组件模块，进而实现按需加载的功能
- 如何添加需要的组件
使用vue ui添加后的组件会在plugins目录下创建element.js文件，然后在main.js中引入该文件。文件内容如下：
import Vue from "vue";
import { Button } from "element-ui";
Vue.use(Button);
这就是只引入Button的方法，如果要按需添加，只需要依葫芦画瓢即可！
安装
全局安装@vue/cli
yarn global add @vue/cli
检查是否安装成功(需重启更新环境变量)
vue --version
快速原型开发
新版本Vue中增加了该功能，方便快速进行单个Vue文件开发，需要先额外安装一个全局的扩展。
yarn global add @vue/cli-service-global
入手尝鲜
新建index.vue文件
<template>
<div>Hello Vue</div>
</template>
运行服务
vue serve index.vue
效果
创建项目
略
vue.config.js
在vue cli 3.x/4.x 中，使用vue.cofig.js来进行一些包括webpack的配置。比如我们可以想要一个控制台输出编译时间的配置，可以在如下设置
const moment = require('moment')
module.exports = {
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].title = '三只蜜桔后台管理系统·商户版',
args[0].buildTime = moment().format('YYYY.MM.DD.HH.mm')
return args
})
}
}
亦或者，我们想要在生产环境禁用console.log
const moment = require('moment')
module.exports = {
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].title = '三只蜜桔后台管理系统·商户版',
args[0].buildTime = moment().format('YYYY.MM.DD.HH.mm')
return args
})
config.optimization
.minimizer('terser')
.tap(args => {
Object.assign(args[0].terserOptions.compress, {
pure_funcs: ['console.log']
})
return args
})
},
productionSourceMap: false,
configureWebpack: {
output: {
filename: `${moment().format('YYYY.MM.DD.HH.mm')}.${process.env.NODE_ENV}.[name].js`,
chunkFilename: `${moment().format('YYYY.MM.DD.HH.mm')}.${process.env.NODE_ENV}.[name].js`
}
}
}
v-html介绍
如果不使用v-html而是直接将html标签加入视图层会出现html标签不解析的情况，如果我们想实现解析的效果。vue中提供了v-html指令。使用 v-html 指令，你可以将html标签解析渲染到视图层。
微信小程序如何使用？
由于微信小程序只是类vue的，与vue存在着很多不同点。但是为了秉承将vue进行到底的宗旨，很多微信小程序开发框架如雨后春笋。在我使用的过程中，感觉uni-app与vue最为贴近，而且适配了很多vue的特性，如：v-model，filters，v-html等。官网是这样介绍的。
其中，他们是通过微信小程序rich-text的属性来实现v-html的效果的。所以，我们想知道支持什么标签，就得移步至rich-text | 微信开发文档
开始实现Demo
demo 中的需求是一个赛事报名list，其中赛事状态有，预报名，报名成功，正在进行，已结束等。
预实现方法：由于微信小程序的rich-text组件会禁用所有的节点事件，所以想通过@click绑定v-html节点事件，filter渲染界面。但是在实现过程中发现不支持在v-html中使用filter, 故后来采用methods的返回值来实现视图层的渲染。
效果如下：至此效果，v-html解析成功
添加状态判断
v-model 介绍
首先明确一点，v-model仅仅是语法糖。
<input type="text" v-model="something">
等价于
<input
type="text"
v-bind:value="something"
v-on:input="something = $event.target.value">
它将一个较复杂的input双向数据绑定简化了他的书写方式。
微信小程序绑定input
最开始我是使用微信推荐的写法
<input bindtap="input" />
然后在js里面解析event，然后再setData
uni-app下v-model的写法
本文采用
uni-app自定义组件模式
wxml
...
<form @submit="formSubmit" @reset="formReset" :model="formItem" class="tm-every-center padding bg-white">
<view class="section flex align-center">
<view class="section__title">姓名：</view>
<input name="name" placeholder="请填写您的姓名" class="bg-gray" v-model="formItem.name" />
</view>
<view class="section flex align-center">
<view class="section__title">手机：</view>
<input name="name" placeholder="请填写您的姓名" class="bg-gray" v-model="formItem.phone" />
</view>
<view class="section flex align-center">
<view class="section__title">赛点：</view>
<input name="name" placeholder="请填写您的姓名" class="bg-gray" v-model="formItem.competition" />
</view>
<view class="btn-area margin-top"><button formType="submit" class="cu-btn">提交</button></view>
</form>
...
然后在data里面设置