vuecli3.x创建项目文件配置

vuecli3创建项目

在终端输入

vue create 项目名称

创建完成后会发现和2.x创建的项目文件有所精简

补充config.js和proxy.js

这两个文件是2.x中本地服务配置和代理配置文件

1. 首先在根目录下新增文件名为vue.config 的js文件，其中的proxy我注释掉了，我比较喜欢抽出proxy文件单独配置

const path = require('path');
const resolve = (dir) => path.join(__dirname, dir); // 给public路径添加别名

module.exports = {
    publicPath: '/app/', // base目录，等同于router.js的base字段
    assetsDir: "static", // 打包后静态资源目录，注意public文件下目录（别名）配置，index.html的icon路径
    devServer: {
        open: true,
        host:"localhost",
        port: 9988,
        https: false,
//         proxy: {
//         },
        before: app => {
            // 执行前操作，可以在此添加mock数据。与proxy代理不可并用
            app.get('/api/test', function (req, res) {
                let data = require('./src/mock/test.json')
                res.json(data)
            })
        }
    },
    productionSourceMap: false, // 生产环境map文件
    chainWebpack: config => {
        // 添加别名（src默认为@，不用再次添加）
        config.resolve.alias
            .set('@pub', resolve('public')) // 设置public别名为@pub
    },
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
        } else {
            // 为开发环境修改配置...
        }
    }
}

2.增加proxy文件，也是根目录新增名称proxy的js文件

'/api': {
        target:'http://baidu.com', // 请求地址
            
        changeOrigin:true, // 在vue-cli3中，默认changeOrigin的值是true,意味着服务器host设置成target，这与vue-cli2不一致，vue-cli2这个默认值是false
// changeOrigin的值是true,target是host, request URL是http://baidu.com
// 如果设置changeOrigin: false，host就是浏览器发送过来的host，也就是localhost:8082。
            
        pathRewrite:{  // 路径重写，eg:把api接口替换为''
          '^/api': ''  
        }
      }

3.安装element ui

npm i element-ui -S

按需引入：

npm install babel-plugin-component -D

此时发现element ui官网说的要修改的babelrc文件找不到 别再找.babelrc文件了，直接修改babel.config.js文件。 修改babel.config.js文件：

module.exports = {
  presets: ["@vue/app"],
  plugins:[
    [
      "component",
      {
        "libraryName":"element-ui",
        "styleLibraryName":"theme-chalk"
      }
    ]
  ]
}

在main.js中按需引入即可：

import Vue from 'vue'
import App from './App.vue'
import 'element-ui/lib/theme-chalk/index.css'
import { Button, Select } from 'element-ui'

Vue.config.productionTip = false
Vue.component(Button.name, Button)
Vue.component(Select.name, Select)

new Vue({
  render: h => h(App),
}).$mount('#app')

需要注意的是不要引入element ui+，也就是plus版本，那个是需要vue3.0配合的，会报错，我试过！

成功按需引入：