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