Vue创建项目

版本

@vue/cli 4.5.9

初始化项目

控制台 cd 到先要创建项目的目录下，输入 vue ui，浏览器会自动打开 UI 页面。

如果没有项目，会跳转以下页面

项目管理器
如果之前创建过项目，页面会跳转到
仪表盘
需要切换到项目管理器
微信截图_20201124145758.png
在在项目管理器中切换到【创建】，确认文件夹无误后，点击【在此创建项目】
创建项目
输入项目名，选择预设，创建项目即可，项目穿件完成会跳转到仪表盘，否则可能是创建失败
创建成功
创建完成后可以切换到插件界面，安装各种插件，像vue-router,vuex等等，这个 UI 界面功能还挺丰富，不过毕竟代码还是得在 IDE 中编写，也就没进一步探索。
vue如何通过vue ui创建和管理项目
初始化后的文件夹大概是这样：
初始目录

基础配置

从初始化的文件夹来看，并没有配置文件 vue.config.js，需要手动创建和配置
vue.config.js配置
文档原文：vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

在src同级创建 vue.config.js，
格式：

module.exports={
  devServer: {
    port: 9528,
    open: false,
    overlay: {
      warnings: false,
      errors: true
    },
    //代理
    proxy: {
        '/oa': {
          target:`http://127.0.0.1:11313/`,
          changeOrigin: true,
          pathRewrite: {
            '/oa': ''
          },
        },
        '/requestLocal': {
          target: `http://127.0.0.1:11312/`,
          changeOrigin: true,
          pathRewrite: {
            '/requestLocal': ''
          },
        }
      },
  }
}

也可以不在 vue.config.js 中直接配置，而是在其它 js 配置，最终将 js 引入到 vue.config.js

安装和引用组件库

以element-ui为例，
npm i element-ui -S，完成安装后需要在main.js中引用

import Vue from 'vue'
import elementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
//引用该组件库全部组件
Vue.use(elementUI)
//如果不需要全部组件，可以用下面的方式，只引用使用的组件
//import { input, button } from 'element-ui'
//Vue.use(input);
//Vue,use(button);