Element ui
npm i element-ui -S //下载
//main.js
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
Mock.js
npm install axios -S //下载axios
npm install -D mockjs //下载 mock.js
//main.js
import './mock/index.js' //引入
运行项目
//main.js 进行配置
import axios from 'axios'
Vue.prototype.$http = axios
//创建一个mock的文件夹,然后在里面js文件里面写接口数据
Mock.mock('/api/demo1/get', 'get', {
status: 200,
message: '获取测试数据成功',
data: ['测试数据1', '测试数据2', '测试数据3']
})
//使用
created () {
this.$http.get('/api/demo1/get').then(res => {
console.log(res)
})
},
模拟数据请求
//模拟get请求
Mock.mock('/api/demo1/get', 'get', {
status: 200,
message: '获取测试数据成功',
"data|1-20": [
{
id: '@increment()',
title: '@ctitle()',
price: '@natural(0, 99999)',
url: '@dataImage("300x300")'
}
]
})
//模拟post请求
Mock.mock('/api/demo1/post', 'post', function(options) {
console.log('options:', JSON.parse(options.body).title);
return Mock.mock({
title: '@cword(2,5)'
})
})
懒加载
npm install vue-lazyload -S //下载插件
import lazyload from 'vue-lazyload' // 引入
// 进行初步的配置
Vue.use(lazyload, {
preLoad: 1.5,
attempt: 1,
loading: require('@/static/lodding.gif'),
})
//使用
<ul>
<li v-for="img in list">
<img v-lazy="img.src" >
</li>
</ul>
触底刷新
npm install vue-infinite-scroll -S //下载
//main.js
import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)
//使用
<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
...
</div>
Ant design ui
npm install ant-design-vue --save//下载
//main.js
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
Vue.use(Antd)
响应式布局
npm install postcss-px-to-viewport -S 下载
在通过vue-cli
创建的项目根目录创建.postcssrc.js
文件,并且在该文件中添加如下的配置:
const path = require('path')
module.exports = ({ file }) => {
const designWidth = file.dirname.includes(
path.join('node_modules', 'ant-design-vue')
)
? 375
: 750
return {
plugins: {
autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀,如-webkit-,-moz-等等
'postcss-px-to-viewport': {
unitToConvert: 'px', // 要转化的单位
viewportWidth: designWidth, // UI设计稿的宽度
unitPrecision: 6, // 转换后的精度,即小数点位数
propList: ['*'], // 指定转换的css属性的单位,*代表全部css属性的单位都进行转换
viewportUnit: 'vw', // 指定需要转换成的视窗单位,默认vw
fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位,默认vw
selectorBlackList: [], // 指定不转换为视窗单位的类名,
minPixelValue: 1, // 默认值1,小于或等于1px则不进行转换
mediaQuery: true, // 是否在媒体查询的css代码中也进行转换,默认false
exclude: [], // 设置忽略文件,用正则做目录名匹配
landscape: false, // 是否处理横屏情况
// replace: true, // 是否转换后直接更换属性值
},
},
}
}
vscode 配置eslint和prettier
首先,需要在vscode
上安装eslint
和prettier
的插件。
在vue项目中,.eslintrc.js
文件主要负责eslint
的相关配置。
module.exports = {
root: true,
env: {
node: true,
},
extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
parserOptions: {
parser: "babel-eslint",
},
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
quotes: ['error', 'single', { allowTemplateLiterals: true }], // 单引号 允许使用反引号
semi: ['error', 'never'], // 禁止末尾使用分号
'prettier/prettier': [
'error',
{
endOfLine: 'auto',
},
],
},
};
.prettierrc.js
文件负责prettier
的规则设置:
module.exports = {
tabWidth: 2, // tab
semi: false, // 结尾不用分号
singleQuote: true, // 使用单引号
bracketSpacing: true, // 对象属性前后加空格
disableLanguages: ['vue'], // 不格式化vue文件
endOfLine: 'auto',
}