Use Vue-cli to create projects and common configurations

Preface

Create project
vue-router lazy loading
Configure sass and screen adaptation
Data request Axios
Toast prompts
vuex
to download directly

Create project
1. Install global vue-cli
npm install vue-cli -g

2. Generate project template (my_projuct is the project name)
vue init webpack my_projuct

3. Enter the generated project folder
cd my_project

4. Initialization, installation depends on
npm install

5. Run
npm run dev

5. Package
npm run build

Vue-router lazy loading

Single-page application, if there is no application lazy loading, the first time you enter, there will be too much content to be loaded, and a long white screen will appear, which is not conducive to the user experience. Using lazy loading can divide the page and load it when needed The corresponding page can effectively reduce the pressure and time of the first loading.

Load the original route of index.js under the router folder
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
}
]
})

Modified to lazy loading
import Vue from'vue'
import Router from'vue-router'

Vue.use(Router)

export default new Router({
routes: [
{
path: ‘/’,
component: resolve => require([’@/components/HelloWorld’], resolve)
}
]
})

Configure sass and screen adaptation
Configure sass
1. Install sass-loader and node-sass
npm install sass-loader node-sass --save-dev

2. Use
Add lang='scss' to the style in the .vue file, for example

Mobile terminal-screen adaptation
1. Create a new folder styles in the src folder, and create two new scss files-mixin.scss / reset.scss
mixin.scss
$SCALE: 10;
$BASE: 375 / $SCALE;/ /375 is the design drawing size

// More than display ellipsis
@mixin ellipsis { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } //Multiline text, more than display ellipsis @mixin moreLine($num){ display: -webkit-box; /** The object is displayed as a flexible box model / -webkit-box-orient: vertical; / Set or retrieve the arrangement of the child elements of the flexible box object / -webkit-line-clamp: $num; / Number of rows displayed / overflow : hidden; / Hide content beyond **/ }

@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. Set the font-size of html in the App.vue file

3.mixin.scss needs to be introduced in the style in the required .vue file, such as HelloWorld.vue in components

Data request axios
1. Install axios
npm install axios --save

2. Create a new api folder in the src folder, and create a new index.js file
import axios from'axios';
var qs = require('qs');

if (process.env.NODE_ENV ==='development') { axios.defaults.baseURL =''; //''Fill in the requested domain name )

import VueRouter from ‘vue-router’;

//get request method
export const home = () => { return axios.get('/api/index'); } //post request method (including parameters) export const article = (id)=>{ const params = qs.stringify({'id':id}); return axios.post('/api/article', params); }

3. Call the interface

Toast tips

toast.png

1. Create a common Toast prompt component
src/components/toast/index.vue

{ {toastTitle}}

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

}
}

Load in main.js

//toast
import toast from ‘./components/toast/plugin’
Vue.use(toast)

4. Use in the page

Use Vue-cli to create projects and common configurations

Guess you like