Vue脚手架与Element-UI

Vue脚手架

Vue脚手架的基本用法

Vue脚手架概述
- Vue脚手架用于快速生成Vue项目基础架构，其官网是：https://cli.vuejs.org/zh/
使用步骤
- 安装3.x版本的Vue脚手架 npm install -g @vue/cli
Vue脚手架基本用法
- 基于交互式命令行的方式，创建新版vue项目
  - vue create my-project
- 基于图形化界面的方式，创建新版vue项目
  - vue ui
    - babel router linter/formate 使用配置文件
- 基于2.x的旧模板，创建旧版vue项目，不推荐
  - npm install -g @vue/cli-init
  - vue init webpack my-project
Vue脚手架生成的项目结构分析
- node_modules 依赖包目录
- public 静态资源目录
- src 组件源码目录
  - assets 存放样式表、图片等静态资源
  - components Vue单文件组件
  - view 视图组件、模板引擎
  - App.vue 项目根组件，承载所有组件的根组件
  - main.js 项目中打包入口文件
  - router.js 路由相关配置
- babel.config.js babel配置文件
- eslintrc.js 语法相关的配置文件
- gitignore git忽略文件
- package.json 包管理配置文件
- postcss.config.js 配置前缀等postcss插件
Vue脚手架的自定义配置
- 通过package.json配置项目
  - 不推荐使用这种配置方式。
    - 因为package.json主要用来管理包的配置信息
    - 为了维护方便，推荐使用vue脚手架相关的配置
    - 单独定义到vue.config.js配置文件中
- 通过单独的配置文件配置项目
  - 在项目的根目录创建文件vue.config.js
  - 在该文件中进行相关配置，从而覆盖默认配置

// package.json
// 必须是符合规范的json语法”
"vue": {
  "devServer": {
    "port": "8888",
    "open": true
  }
}

// vue.config.js
// 在该文件中进行相关配置，从而覆盖默认配置
module.exports = {
  devServer: {
    port: 8888,
    // 默认打开浏览器
    open: true
  }
}

Element-UI的基本使用##

概述
- Element-UI是一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端组件库
- 官网地址： http://element-cn.eleme.io/#/zh-CN
基于命令行方式手动安装
- 安装依赖包npm i element-ui -S
- 导入 Element-UI 相关资源

// main.js
// 导入组件库
import ElementUI from 'element-ui';
// 导入组件相关样式
import 'element-ui/lib/theme-chalk/index.css';
// 配置Vue插件
Vue.use(ElementUI);

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