前言
创建项目
1.安装全局vue-cli
npm install vue-cli -g
2.生成项目模板(my_projuct为项目名称)
vue init webpack my_projuct
3.进入生成的项目文件夹
cd my_project
4.初始化，安装依赖
npm install
5.运行
npm run dev
5.打包
npm run build
vue-router懒加载
单页面应用，如果没有应用懒加载，第一次进入时，需要加载的内容过多，会出现长时间的白屏，不利于用户体验，运用懒加载则可以将页面进行划分，需要的时候加载相对应的页面，可以有效减少第一次加载的压力和用时。
router文件夹下的index.js原路由加载
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
修改为懒加载
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
component: resolve => require(['@/components/HelloWorld'], resolve)
}
]
})
配置sass及屏幕适配
配置sass
1.安装sass-loader及node-sass
npm install sass-loader node-sass --save-dev
2.使用
在.vue文件中的style中添加 lang='scss'，例如
<style scoped lang='scss'>
$t-base:#32ba90;
.wrap{
color: $t-base;
}
</style>
移动端---屏幕适配
1.在src文件夹中新建一个文件夹styles，并新建两个scss文件 --- mixin.scss / reset.scss
mixin.scss
$SCALE: 10;
$BASE: 375 / $SCALE;//375为设计图尺寸
// 超过显示省略号
@mixin ellipsis {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
//多行文本，超过显示省略号
@mixin moreLine($num){
display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp: $num; /** 显示的行数 **/
overflow: hidden; /** 隐藏超出的内容 **/
}
@function rem ($px) {
@return ($px / $BASE) + rem
}
reset.scss
@import './mixin.scss';
$size_small:rem(12);
$size_middle:rem(14);
$size_default:rem(16);
$size_big:rem(18);
$text_color: #666;
$bg_color: #32ba90;
$border_color: #dedede;
body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, li, a, p, h1, h2, h3, h4,h5, h6, i, b, em,textarea, button, input, select, figure, figcaption {
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
border: none;
font-weight: normal;
font-family: PingFangSC-Light,helvetica,'Heiti SC';
box-sizing: border-box;
font-size: 14px;
-webkit-tap-highlight-color:transparent;
-webkit-font-smoothing: antialiased;
&:hover{
outline: none;
}
}
a, a:visited {
text-decoration: none;
color: #333;
}
input:focus {
outline: none;
border: none;
}
html, body {
width: 100%;
height: 100%;
-webkit-font-smoothing: antialiased;
background: #fff;
color: #333;
padding: 0;
margin: 0;
}
// 禁止用户选中
body{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
::-webkit-scrollbar {
display: none;
}
.fl{
float: left;
}
.fr{
float: right;
}
.clearfix:after{ /*最简方式*/
content: '';
display: block;
clear: both;
}
.clearfix{ /*兼容 IE*/
zoom: 1;
}
2.在App.vue文件中设置html的font-size
<script>
import {mapGetters,mapActions} from 'vuex'
export default {
name: 'App',
mounted () {
// 设置html的font-size
document.addEventListener('DOMContentLoaded', function () {
const html = document.querySelector('html');
html.style.fontSize = window.innerWidth / 10 + 'px';
});
}
}
</script>
3.mixin.scss则需要在所需的.vue文件中的style中引入，例如components中的HelloWorld.vue
<style scoped lang='scss'>
@import '../styles/reset.scss';
/*可使用mixin和reset中的变量及方法*/
</style>
数据请求axios
1.安装axios
npm install axios --save
2.在src文件夹中新建api文件夹，并新建index.js文件
import axios from 'axios';
var qs = require('qs');
if (process.env.NODE_ENV === 'development') {
axios.defaults.baseURL = ''; //''里面填写请求域名
}
import VueRouter from 'vue-router';
//get请求方式
export const home = () => {
return axios.get('/api/index');
}
//post请求方式(包含参数)
export const article = (id)=>{
const params = qs.stringify({'id':id});
return axios.post('/api/article', params);
}
3.调用接口
<script>
import {home} from '@/api';//引入
export default {
data () {
return {
}
},
mounted () {
const self = this;
home().then(r => {//调用接口
let res = r.data;
console.log(res)
});
},
}
</script>
Toast提示
toast.png
1.创建一个普通的Toast提示组件
src/components/toast/index.vue
<template>
<div v-if="showToast" class="toast" >
<p>{{ toastTitle }}</p>
</div>
</template>
<script>
export default {
data: () => ({
showToast: false,
toastTitle: '',
}),
methods: {
show (params) {
this.toastTitle = params;
this.showToast = true
},
},
watch: {
toastTitle: function(val) {
if (val) {
this.showToast = true;
setTimeout(() => {
this.showToast = false;
this.toastTitle='';
}, 2000)
}
return val;
}
}
}
</script>
<style scoped lang='scss'>
@import '../../styles/mixin.scss';
.toast {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(49, 49, 49, 0.8);
color: #fff;
border-radius: rem(5);
z-index: 999;
text-align: center;
font-size: rem(14);
p{
margin: 0;
padding: rem(4) rem(10);
}
}
</style>
- 将组件注册成为plugin
src/components/toast/plugin.js
import Toast from './index'
export default {
install (Vue, options = {}) {
const VueToast = Vue.extend(Toast)
let toast = null
function $toast (params) {
return new Promise(resolve => {
if (!toast) {
toast = new VueToast()
toast.$mount()
document.querySelector(options.container || 'body').appendChild(toast.$el)
}
toast.show(params)
resolve()
})
}
Vue.prototype.$toast = $toast
}
}
- 在main.js中载入
//toast
import toast from './components/toast/plugin'
Vue.use(toast)
4.在页面中使用
<template>
<div class="wrap">
<button class="btn" @click="showToast">show toast</button>
</div>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
showToast () {
this.$toast('toast')
}
}
}
</script>
vuex
在此不多做介绍，详情请参考我的另一篇文章Vue组件通信及状态管理
