Vuecli3 creates the project

Input at terminal

Vue create Project nameCopy the code

After creation, you will find that the project files created with 2.x have been simplified

Add config.js and proxy.js

These are the local service configuration and proxy configuration files in 2.x

  1. First, add the js file named vue.config in the root directory. I commented out the proxy file. I prefer to extract the proxy file and configure it separately
const path = require('path');
const resolve = (dir) = > path.join(__dirname, dir); // Add an alias to the public path

module.exports = {
    publicPath: '/app/'.// Base directory, which is equivalent to the base field of router.js
    assetsDir: "static".// Static resource directory after packaging, pay attention to directory (alias) configuration under public file, icon path of index.html
    devServer: {
        open: true.host:"localhost".port: 9988.https: false.// proxy: {
/ /},
        before: app= > {
            // Perform pre-action, where you can add mock data. This parameter cannot be used with a proxy
            app.get('/api/test'.function (req, res) {
                let data = require('./src/mock/test.json')
                res.json(data)
            })
        }
    },
    productionSourceMap: false.// Production environment map file
    chainWebpack: config= > {
        // Add an alias (SRC is @ by default, do not add it again)
        config.resolve.alias
            .set('@pub', resolve('public')) // Set the public alias to @pub
    },
    configureWebpack: config= > {
        if (process.env.NODE_ENV === 'production') {
            // Modify the configuration for the production environment...
        } else {
            // Modify the configuration for the development environment...}}}Copy the code

2. Add the proxy file, which is also the JS file named proxy in the root directory

'/api': {
        target:'http://baidu.com'.// Request an address
            
        changeOrigin:true.// In vue-cli3, the default changeOrigin value is true, which means that the server host is set to target. This is inconsistent with vue-cli2, which is false by default
// The changeOrigin value is true,target is host, and the request URL is http://baidu.com
// If changeOrigin: false is set to host, the host that the browser sent is localhost:8082.
            
        pathRewrite: {// Path rewrite, eg: replace the API interface with ""
          '^/api': ' '}}Copy the code

3. Install Element UI

npm i element-ui -S
Copy the code

On demand:

npm install babel-plugin-component -D
Copy the code

You can’t find the babelrc file that element UI says you need to modify. You can’t find the babelrc file that element UI says you need to modify. Modify the babel.config.js file:

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

Import as needed in 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')
Copy the code
Note that do not introduce element UI +, also known as the plus version, that requires VUe3.0 with the error, I have tried!

Successfully introduce on demand: