使用Vue-cli创建项目及常用配置

前言

创建项目
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 ( $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots) { @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.在页面中使用

使用Vue-cli创建项目及常用配置

猜你喜欢