vue项目构建

建议采用vue-cli3

一、什么是vue-cli

vue-cli是由vue官方发布的快速构建vue单页面的脚手架。参见vue-cli官方网站。http://vuejs-templates.github.io/webpack/

之前需要使用vue的单文件组件的功能，即将不同的模板分离到不同的.vue后缀的文件中，这样做需要使用webpack打包。参见官方说明：https://cn.vuejs.org/v2/guide/single-file-components.html  

然后在网上看来许多关于使用webpack打包文件的教程，如下：

https://github.com/varHarrie/Dawn-Blossoms/issues/7

普遍采用上面这篇文章介绍的方式。这样需要自己配置很多文件，操作复杂。后面我发现使用vue-cli可以实现webpack的快速打包。具体操作在后面介绍
 

附上项目插件目录

 

【命令行】

	全局安装手脚架	创建项目	安装依赖包	运行调试	打包发布
vue-cli2	npm install vue/cli -g	vue init webpack project-name	npm install	npm run dev	npm run build
vue-cli3	npm install -g @vue/cli	vue create project-name	npm install	npm run serve	npm run build

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

"scripts": {

"serve": "vue-cli-service serve --port 80",

"build": "vue-cli-service build", 

"lint": "vue-cli-service lint"

},

 

## Project setup

```

npm install  ##安装依赖库

```

 

### Compiles and hot-reloads for development

```

npm run serve

```

 

### Compiles and minifies for production

```

npm run build     ## 这样就可以将资源文件打包到上面我们设置的文件夹dist/ 中

```

 

### Run your tests

```

npm run test

```

 

### Lints and fixes files

```

npm run lint

```

 

### Customize configuration

See [Configuration Reference](https://cli.vuejs.org/config/).

 

### 指定根路径

npm run serve --BASE=/mobile/demo/

npm run build --BASE=/mobile/demo/

 

【项目中的插件】

1、ui框架：element-ui（还是推荐iview，iview覆盖样式比element-ui方便），antd

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'
 

 

 

安装依赖的库：