vue-cli3项目须知

【命令行】

	全局安装手脚架	创建项目	安装依赖包	运行调试	打包发布
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'