【命令行】
全局安装手脚架 | 创建项目 | 安装依赖包 | 运行调试 | 打包发布 | |
vue-cli2 | npm install vue-cli -g | vue init webpack project-name | npm install | npm run dev | npm run build |
vue-cli3 | npm install @vue/cli -g | vue create project-name | npm install | npm run serve | npm run build |
【项目中的插件】
1、ui框架:element-ui(还是推荐iview,iview覆盖样式比element-ui方便)
2、按需加载ui组件:babel-plugin-component
/*===== main.js =====*/
import 'element-ui/lib/theme-chalk/index.css'
import {Button } from 'element-ui'
Vue.use(Button)
/*===== babel-plugin-component =====*/
module.exports = {
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
.3、路由:vue-router
/*===== vue.config.js =====*/
/* 设置完,可以在方便引用目标文件 */
const path = require('path')
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src'))
.set('pages', resolve('src/pages'))
.set('components', resolve('src/components'))
.set('assets', resolve('src/assets'))
}
}
4、css预编辑器:sass-loader node-sass
/*===== vue.config.js =====*/
/* 设置的scss文件可以在各个组件中共享 */
const fs = require('fs')
module.exports = {
css: {
loaderOptions: {
sass: {
data: fs.readFileSync('src/assets/styles/base.scss', 'utf-8')
}
}
}
}
5、ajax请求:axios
6、全局变量存储:vuex
7、缓存:js-cookie
8、图表插件:echarts
9、文本复制:clipboard
第一步:页面中导入
import Clipboard from 'clipboard'
第二步:触发元素
<a href="javascript:void(0)" class="u-btn-1 blue linkCopy" :data-clipboard-text="spreakLink" @click="copy">复制</a>
第三步:回调事件
copy () {
let self = this
var clipboard = new Clipboard('.linkCopy')
clipboard.on('success', e => {
alert('专属链接复制成功,赶快发给需要的朋友注册、使用吧!')
// 释放内存
clipboard.destroy()
})
clipboard.on('error', e => {
// 不支持复制
alert('该浏览器不支持自动复制')
// 释放内存
clipboard.destroy()
})
}
10、引入jquery
import $ from 'jquery'