vue登录页面模板（怎样进行mpvue小程序项目搭建）

本文目录

• 怎样进行mpvue小程序项目搭建
• 【手把手撸vue项目】vue欢迎页解析
• vue+vant登录页面demo
• vite2 设置双页面（双入口）的方法
• web前端主流框架主要有哪些
• vue项目里想用html的注册登录路由router/index.js应该怎么写js
• vue里的差值语法this是隐式

怎样进行mpvue小程序项目搭建

这次给大家带来怎样进行mpvue小程序项目搭建，进行mpvue小程序项目搭建的注意事项有哪些，下面就是实战案例，一起来看一下。
前言
mpvue 是美团开源的一套语法与vue.js一致的、快速开发小程序的前端框架，按官网说可以达到小程序与H5界面使用一套代码。使用此框架，开发者将得到完整的 Vue.js 开发体验，同时为 H5 和小程序提供了代码复用的能力。如果想将 H5 项目改造为小程序，或开发小程序后希望将其转换为 H5，mpvue 将是十分契合的一种解决方案。
***隐藏网址***
***隐藏网址***
为什么要用mpvue
首先微信小程序推荐简洁的开发方式，通过多页面聚合完成轻量的产品功能。小程序以离线包方式下载到本地，通过微信客户端载入和启动，开发规范简洁，技术封装彻底，自成开发体系，本身定位为一个简单的逻辑视图层框架，官方并不推荐用来开发复杂应用，但业务需求却难以做到精简。复杂的应用对开发方式有较高的要求，如组件和模块化、自动构建和集成、代码复用和开发效率等，但小程序开发规范较大的限制了这部分能力。所以为了解决上述问题，提高开发效率，提供更好的开发体验，通过使用基于 Vue.js 的mpvue框架来开发微信小程序。
mpvue的特点
彻底的组件化开发能力：提高代码
完整的 Vue.js 开发体验
方便的 Vuex 数据管理方案：方便构建复杂应用
快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload
支持使用 npm 外部依赖
使用 Vue.js 命令行工具 vue-cli 快速初始化项目
H5 代码转换编译成小程序目标代码的能力
项目搭建
项目构成
1、采用mpvue 官方脚手架搭建项目底层结构
***隐藏网址***
3、采用stylus作为项目css预处理工具。
项目框架结构和文件目录结构
主要关注应用程序代码所在的src目录
├── src // 我们的项目的源码编写文件
│ ├── components // 组件目录
│ │ └── head //导航组件
│ ├── config //公共配置
│ │ └── tips // 提示与加载工具类
***隐藏网址***
│ │ └── api // 接口调用文件
│ │ └── config //fly 配置文件
│ ├── pages //项目页面目录
│ ├── store //状态管理 vuex配置目录
│ │ └── actions.js //actions异步修改状态
│ │ └── getters.js //getters计算过滤操作
│ │ └── mutation-types.js //mutations 类型
│ │ └── mutations.js //修改状态
│ │ └── index.js //我们组装模块并导出 store 的地方
│ │ └── state.js //数据源定义
│ ├── stylus //stylus css处理器目录
│ │ └── common.styl // 全局css样式
│ │ └── index.styl // stylus 出口
│ │ └── mixin.styl //mixin 方法
│ │ └── reset.styl //reset css
│ ├── untils //工具函数目录
│ │ └── index.js
│ ├── App.vue // APP入口文件
│ ├── main.js // 主配置文件搭建过程
***隐藏网址***
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project
# 安装依赖
$ cd my-project
$ npm install
# 启动构建
$ npm run dev二、微信开发者工具打开dist目录，查看页面是否显示。
三、配置 fly
# npm安装 flyio
***隐藏网址***
***隐藏网址***
│ │ └── api.js // 接口调用文件
│ │ └── config.js //fly 配置文件2、config.js
//引入 fly
var Fly=require("flyio/dist/npm/wx")
var fly=new Fly;
//配置请求基地址
// //定义公共headers
// fly.config.headers={xx:5,bb:6,dd:7}
// //设置超时
// fly.config.timeout=10000;
// //设置请求基地址
***隐藏网址***
//添加拦截器
fly.interceptors.request.use((config,promise)=》{
//给所有请求添加自定义header
config.headers="flyio";
return config;
})
***隐藏网址***
export default fly3、api.js
import fly from ’./config’
import qs from ’qs’
// 配置API接口地址
let root =’接口域名’;
/**
* 接口模版====post
*
* export const test = params =》 {return fly.post(`${root}/xx/xx`, qs.stringify(params))};
*
* 接口模版====get
*
* export const test1 = function(){return fly.get(`${root}/api/getNewsList`)}
*
*
* 用法：
* 在 页面用引入 test
***隐藏网址***
*
* test(params).then(res=》{ console.log(res) })
*/
export const test = params =》 {return fly.post(`${root}/xx/xx`, qs.stringify(params))};四、配置 stylus
# npm安装 flyio
$ npm install stylus --save-dev
$ npm install stylus-loader --save-dev1、在src下 创建 stylus目录 目录结构为：
│ ├── stylus //stylus css处理器目录
│ │ └── common.styl // 全局css样式
│ │ └── index.styl // stylus 出口
│ │ └── mixin.styl //mixin 方法
│ │ └── reset.styl //reset css2、mixin.stylus
考虑到将来可能要复用到h5项目中 所以这里写了一个 单位转换的方法【px2rem】，并没有使用存在平台差异的rpx，以后即便迁移到web 端, 只需要处理【px2rem】的单位转换逻辑就好
// 单行显示省略号
no-wrap()
text-overflow: ellipsis
overflow: hidden
white-space: nowrap
// 多行显示省略号
no-wrap-more($col)
display: -webkit-box
-webkit-box-orient: vertical
-webkit-line-clamp: $col
overflow: hidden
//rem转换 $px / 75 *1rem
px2rem($px)
$px * 1rpx3、index.stylus
@import "./mixin.styl"
@import "./reset.styl"
@import "./common.styl"4、引入
在 app.vue 中引入
《style lang="stylus" type="text/stylus" rel="stylesheet/stylus"》
@import "stylus/index.styl"
《/style》**如果要用到mixin.stylus中的方法，需要在页面的stylus文件中 单独引用 mixin.stylus
五 配置 config目录
1、在src下 创建 config目录 目录结构为：
│ ├── config //公共配置
│ │ └── tips.js // 提示与加载工具类2、tips.js
考虑到将来可能要复用到h5项目中 所以这里将微信提供的提示与加载框封装成工具类，以后即便迁移到web 端, 只需要删除tips.js的wx api就可以了。
可以在 main.js中引入，绑定到原型上
import Tips from ’./config/tip’
Vue.prototype.$tips=Tips在页面中 this.$tips.alert("请输入手机号")调用
/**
* 提示与加载工具类
*/
export default class Tips {
constructor() {
this.isLoading = false;
}
/**
* 弹出提示框
*/
static success(title, duration = 500) {
setTimeout(() =》 {
wx.showToast({
title: title,
icon: "success",
mask: true,
duration: duration
});
}, 300);
if (duration 》 0) {
return new Promise((resolve, reject) =》 {
setTimeout(() =》 {
resolve();
}, duration);
});
}
}
/**
* 弹出确认窗口
*/
static confirm(text, payload = {}, title = "提示") {
return new Promise((resolve, reject) =》 {
wx.showModal({
title: title,
content: text,
showCancel: true,
success: res =》 {
if (res.confirm) {
resolve(payload);
} else if (res.cancel) {
reject(payload);
}
},
fail: res =》 {
reject(payload);
}
});
});
}
static toast(title, onHide, icon = "success") {
setTimeout(() =》 {
wx.showToast({
title: title,
icon: icon,
mask: true,
duration: 500
});
}, 300);
// 隐藏结束回调
if (onHide) {
setTimeout(() =》 {
onHide();
}, 500);
}
}
/**
* 弹出加载提示
*/
static loading(title = "加载中") {
if (Tips.isLoading) {
return;
}
Tips.isLoading = true;
wx.showLoading({
title: title,
mask: true
});
}
/**
* 加载完毕
*/
static loaded() {
if (Tips.isLoading) {
Tips.isLoading = false;
wx.hideLoading();
}
}
static share(title, url, desc) {
return {
title: title,
path: url,
desc: desc,
success: function(res) {
Tips.toast("分享成功");
}
};
}
static alert (text, ok) {
if (ok === void 0) { ok = function (res) { }; }
if (!text) {
return;
}
wx.showModal({
content: text,
showCancel: false,
confirmColor: ’#000000’,
cancelColor: ’#000000’,
success: ok
});
};
}
/**
* 静态变量，是否加载中
*/
Tips.isLoading = false;六、配置vuex
1、在src下 创建 store目录 目录结构为：
│ ├── store //状态管理 vuex配置目录
│ │ └── actions.js //actions异步修改状态
│ │ └── getters.js //getters计算过滤操作
│ │ └── mutation-types.js //mutations 类型
│ │ └── mutations.js //修改状态
│ │ └── index.js //我们组装模块并导出 store 的地方
│ │ └── state.js //数据源定义2、main.js中引入store, 并绑定到Vue构造函数的原型上，这样在每个vue的组件都可以通过this.$store访问store对象。
import store from ’./store’
Vue.prototype.$store=store;3、state.js
在数据源文件中定义变量：
const state={
test: 0,
}
export default state4、mutation-types.js
在mutation-types.js中定义你的Mutation的名字
export const TEST = ’TEST’ // 这是测试的5、mutations.js
在mutations.js中写处理方法
import * as types from ’./mutation-types’
const matations={
/**
* state:当前状态树
* data: 提交matations时传的参数
*/
//是否有渠道
(state,data) {
state.TEST = data;
},
}
export default matations6、使用方法
# 在 store index.js 中引入
import Vue from ’vue’;
import Vuex from ’vuex’;
import state from ’./state’
import mutations from ’./mutations’
Vue.use(Vuex);
export default new Vuex.Store({
state,
mutations,
})在页面中引用
7、将vuex中的数据持久化到本地 （使用vuex-persistedstate）
# 安装vuex-persistedstate
$ npm install vuex-persistedstate --save在 store index.js 引入
import Vue from ’vue’;
import Vuex from ’vuex’;
import state from ’./state’
import mutations from ’./mutations’
import createPersistedState from ’vuex-persistedstate’
Vue.use(Vuex);
export default new Vuex.Store({
state,
mutations,
plugins: [
createPersistedState({
storage: {
getItem: key =》 wx.getStorageSync(key),
setItem: (key, value) =》 wx.setStorageSync(key, value),
removeItem: key =》 {}
}
})
]
})相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
Vue.js实现表格增删步奏详解
如何使用PHP实现微信小程序人脸识别刷脸登录

【手把手撸vue项目】vue欢迎页解析

在介绍完简单的项目目录之后，我们对项目自动生成的欢迎页进行讲解（也就是对src目录进行讲解）。

在这个文件中，我们可以进行路由配置，包括子路由等，也可以通过导航守卫进行路由限制。
举个例子：某些页面需要登录，跳转到这些页面的时候，我们就将其进行拦截，跳转到登陆页面去。这部分内容后期会进行讲解。

图中，我们不难看出，默认引入了叫HelloWorld.vue的文件。并在routers中进行了使用。

path:***隐藏网址***
name: 这个router的名字，跳转时也可通过name来指定跳转到哪个路由中。
component: 顾名思义，表示使用的哪个组件。

在vue项目中，组件存放在components文件夹中，这些组件可以通过路由来进行使用，也可以通过组件间的引入来进行使用。

vue+vant登录页面demo

《img src="../assets/logo.png" alt=""》

    《van-form @submit="onSubmit"》

      《van-field v-model="mobile"

                 name="手机号"

                 label="手机号"

                 placeholder="手机号"

                 :rules="rules.mobile" /》

      《van-field v-model="code"

                 name="验证码"

                 label="验证码"

                 placeholder="验证码"

                 :rules="rules.code"》

        《template #button》

          《van-count-down :time="1000 * 60"

                          format="ss s"

                          @finish="isSendCode= false"

                          v-if="isSendCode" /》

          《van-button v-else

                      @click="onSendSms"

                      round

                      size="small"

                      type="default"》发送验证码《/van-button》

        《/template》

      《/van-field》

      《div style="margin: 16px;"》

        《van-button round

                    block

                    type="info"

                    native-type="submit"》

          登录

        《/van-button》

      《/div》

    《/van-form》

《script》

// @ is an alias to /src

export default {

  data () {

    return {

      mobile: ’’,

      code: ’’,

      rules: {

        mobile: [{

          required: true,

          message: ’手机号不能为空’

        }, {

          pattern: /^1\d{9}$/,

          message: ’手机号格式错误’

        }],

        code: [{

          required: true,

          message: ’验证码不能为空’

        }, {

          pattern: /^\d{6}$/,

          message: ’验证码格式错误’

        }]

      },

      isSendCode: false

    }

  },

  methods: {

    onSubmit (values) {

      if (this.code === ’123456’) {

        this.$toast(’登录成功’)

        this.$router.push(’/index’)

      } else {

        this.$toast(’手机号或验证码错误’)

      }

    },

    onSendSms () {

      this.isSendCode= !this.isSendCode

    }

  }

}

《/script》

vite2 设置双页面（双入口）的方法

vite2的官网介绍了配置双页面的方法，但是有点简单，可能默认我们都是高手吧。这里分享一下省略掉的细节部分。

根据官网 多页面应用模式 介绍，我们先在vite.config.js里面做如下设置：

官网的介绍到这来就结束了，接下来怎么办？自己想呗。
首先确定一下 url 访问的问题，我们把根目录的 index.html 文件复制一份，改名为 project.html。

然后 改一下 里的的 《title》演示项目《/title》 ，作为区别。
***隐藏网址***

虽然入口改完了，但是网页内容还是完全一样的，那是因为我们还没有改main.js和App.js。

我们打开 project.html 修改如下：

改 《script type="module" src="/src/project-main.js"》《/script》 这一段即可，就是加载需要的main.js文件。

然后就是复制一份 main.js 和 App.js ，这样一个项目里面就做出来了两个入口的子项目。

在 main.js 里面 改一下 import App from ’./project-App.vue’ ，指定一下新的App.js即可。

剩下的根据项目需要修改即可。

web前端主流框架主要有哪些

1、vue-element-admin

一个基于vue2.0和Element的控制面板UI框架，这是使用vue技术栈开发的前端程序员的首选管理系统模板，模板已经非常成熟，并且有相关的社区和维护人员，开发时遇到问题也不要慌。

2、AdmianLTE

非常流行的基于Bootstrap 3.x的免费后台UI框架，这是一个非常老牌的后台管理系统模板，每个页面都是单独的html网页，适合前端入门新手来做项目。

3、Gentelella

Gentelella是一个可免费使用的Bootstrap管理界面模板，使用群体比较广泛。这个模板使用默认的Bootstrap 3的样式，还有一系列功能强大的JQuery插件和工具，可以快速创建管理界面模板或者后台的Dashboard。

4：iview-admin

iView admin 是基于 iView 的 Vue 2.0 控制面板。搭配使用 iView UI 组件库形成的一套后台集成解决方案 。

5：blur-admin

BlurAdmin 是一款使用 AngularJs + Bootstrap实现的单页管理端模版，视觉冲击极强的管理后台，各种动画效果。

6：vue-manage-system

vue-manage-system，一个基于 Vue.js 和 element-ui的后台管理系统模板，挺喜欢这个界面的UI，简约清晰不累赘，多功能的后台框架模板，适用于绝大部分的后台管理系统开发。

7：material-dashboard

基于 Bootstrap 4 和 Material 风格的控制面板。Material Dashboard 是一个开源的 Material

Bootstrap Admin，其设计灵感来自谷歌的 Material Design 。

8：d2-admin

D2Admin 是一个完全 开源免费 的企业中后台产品前端集成方案，基于 vue.js 和 ElementUI 的管理系统前端解决方案 ，小于 60kb的本地首屏 js 加载,已经做好大部分项目前期准备工作

9：vuestic-admin

vuestic-admin管理台仪表盘是一个响应式的仪表盘模板，采用Bootstrap4和Vue.js构建。这个精美的管理台模板提供了自定义元素组件，如地图，聊天，个人资料卡，图标，进度条等，以及用于登录和注册的预建页面。

亲爱的小伙伴，你对前端技术感兴趣吗？尚学堂前端学院带着惊喜大礼来了！动动小手加入我们：网页链接，不仅有志同道合的朋友，指导人生的老师，更有看不完的技术教程随你挑！国庆期间报班成功，更有意想不到的优惠大礼包等你哦~心动就马上行动过起来吧！

北京校区10月前端开班计划：

开班时间：2020.10.19

优惠活动：

1、报名立减1010元；

2、两人及以上团报每人优惠815元；

3、提前预报名预约座位；

4、开课免费试学3周。

备注：活动仅限参加10月班级，11月活动敬请期待！

vue项目里想用html的注册登录路由router/index.js应该怎么写js

vue.js路由使用方法：vue1.0的方法
《html》《a href="#" v-link="{path:’/login’}"》登陆《/a》《router-view》《/router-view》//内容显示的《script》//1、准备一个根组件var App = Vue.extend();//2、准备组件var Login = Vue.extend({template:{《h3》登陆页面《/h3》}});//3、准备路由
var router = new vueRouter();//4、关联组件和路径router.map({’login’:{component:Login //组件名称}});//5、启动路由router.start(App,’#box’);//6、默认跳转页面（不是必须）
router.redirect({’/’:’login’});《/script》《/html》

vue里的差值语法this是隐式

1 插值语法（插值表达式）
由于vue是基于数据驱动的，所以当我们需要在页面中显示一段文本时，可以使用如下操作：
export default {
data(){
return{
msg:"hello vue"
}
},
methods:{
handleClick(){
this.msg = "hello change"
}
}
}
登录后复制

在模板中输出msg中的值：可以使用{{}}，需要注意的是 我们的模板中必须有一个根节点，也只能有一个根节点 我们的操作都要在这个根节点中。
《template》
《div》{{msg}}《/div》
《/template》
登录后复制
2 v-html 指令
这个指令主要是帮助我们显示带有标签的文本，比如我们的数据是这样的 msg2:’《span》测试文本《/span》’
这种形式的文本我们用插值语法是无法将span标签解析的，这时我们可以使用v-html指令 如下：
《span v-html="msg2"》《/span》
登录后复制
3 v-if （v-else）和v-show指令
这两个指令主要是用来进行条件判断的，但是这两个指令的区别在于，当我们使用v-if指令时，如果条件为假，节点不会创建（或者节点会被删除），而v-show指令，会创建（隐藏节点），只不过是将display属性设置成none，来进行节点的显示或者隐藏
《span v-if="isShow"》 显示节点《/span》
《span v-else》显示节点2《/span》
登录后复制
v-else 指令和v-if指令可以配合使用，使用方法和我们在js中的使用方式差不多，这里不做过多赘述；
4 v-for 指令
这个指令主要是用来做循环渲染的，类似于js中的for循环 ，使用方法如下： arr:
《ul》
《li v-for="(item,key) in arr" :key="key"》
{{item}} ------------ {{key}}
《/li》
《/ul》
登录后复制
其中item代表的是我们循环出来的每一项，key代表的是改项在数组中的下标，复杂的数据循环同理，如果数据结构有多层的话，可以嵌套使用
5 v-bind指令
***隐藏网址***
绑定src：
《img v-bind:src="src" alt=""》
《!-- 简写如下 --》
《img :src="src" alt=""》
登录后复制
绑定class:
《span v-bind:class="className"》类名绑定《/span》
《!-- 简写如下 --》
《span :class="className"》类名绑定《/span》
登录后复制
v-bind的指令有个简写形式，简写的时候可以把v-bind省略，只留下：即可
6 v-on指令
该指令主要是用来处理事件绑定的，我们在js中使用的事件都可以使用这种方式进行绑定 如下：
《button v-on:click="handleClick"》处理点击事件《/button》
《!-- 简写如下 --》
《button @click="handleClick"》处理点击事件《/button》
登录后复制
methods:{
handleClick(){
this.msg = "hello vue"
}
}
登录后复制
v-on指令也有简写形式，可以将v-on：替换成@符号即可
7 v-cloak指令
如果网速慢，而该标签内容是变量没有请求响应回来的时候，页面上先不显示该标签（vue给该标签加了css样式），当响应回来的时候改标签默认将css样式去除。此指令可以解决使用插值表达式页面闪烁问题