1.Vue脚手架的基本用法

• Vue 脚手架用于快速生成Vue项目基本架构，网址为https://cli.vuejs.org/zh/

使用步骤

• 安装3.x版本的Vue脚手架

npm install -g @vue/cli

• 基于Vue3.x版本的脚手架创建Vue项目

//1.基于交互命令行的方式创建新版Vue项目
vue create my-project

//2.基于图形化界面的方式创建新版Vue项目
vue ui

//3.基于2.x的旧版本创建旧版Vue项目
npm install -g @vue/cli-init
vue init webpack my-project

2.Vue脚手架自定义配置

1.packag.js配置项目（不推荐）

例如

    "vue": {
        "devServer": {
            "port": 8080,
            "open": true
        }
    }

2.通过单独的配置文件配置项目（推荐）

• 在项目的根目录创建vue.config.js文件
• 在该文件中进行相关配置，从而覆盖默认配置

例如：

module.exports = {
    devServer = {
        open: true,
        port: 8080
    }
}

3.Element-UI的基本使用

Element-UI：一套为开发者、设计师和产品经理准备的基于Vue 2.0 的桌面端组件库
官网地址为：http://element-cn.eleme.io/#/zh-CN

1.基于命令行方式手动安装

• 安装依赖包 npm i element-ui -S
• 导入Element-UI相关资源

//导入组件库
import ElementUI from 'element-ui';

//导入组件相关样式
import 'element-ui/lib/theme-chalk/index.css'

//配置Vue插件
Vue.use(ElementUI)

2.基于图形化界面自动安装

• 运行Vue ui命令，打开图形化界面
• 通过Vue项目管理器，进入具体项目配置面板
• 点击插件->添加插件，进入插件查询面板
• 搜索vue-cli-plugin-element并安装
• 配置插件，实现按需导入，从而减少打包后项目的体积