前言
- 创建项目
- vue-router懒加载
- 配置sass及屏幕适配
- 数据请求axios
- Toast提示
- vuex
- 直接下载
创建项目
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'，例如
移动端---屏幕适配
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
3.mixin.scss则需要在所需的.vue文件中的style中引入，例如components中的HelloWorld.vue
数据请求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.调用接口
Toast提示
toast.png
1.创建一个普通的Toast提示组件
src/components/toast/index.vue
{{ toastTitle }}
- 将组件注册成为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.在页面中使用
vuex
在此不多做介绍，详情请参考我的另一篇文章Vue组件通信及状态管理
直接下载
https://github.com/Yimi-shan/vue_cli