Vue基础--前端工程化(二)

4. Vue 脚手架

4.1 Vue 脚手架的基本用法

Vue 脚手架用于快速生成 Vue 项目基础架构，其官网地址为：地址

使用步骤

1.安装 Vue 脚手架：npm install -g @vue/cli

基于脚手架创建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

这里利用图形化界面创建vue项目:
命令行输入：vue ui

4.2 Vue 脚手架生成的项目结构分析

node_modules	依赖包目录
public	静态资源目录
src	源码目录
src/assets	资源目录
src/components	组件目录
src/views	视图组件目录
src/App.vue	根组件
src/main.js	入口js
src/router.js	路由js
babel.config.js	babel配置文件

4.3 Vue 脚手架的自定义配置

1.通过 package.json 配置项目

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

注意：不推荐使用这种配置方式。因为 package.json 主要用来管理包的配置信息；为了方便维护，推荐将 vue 脚
手架相关的配置，单独定义到 vue.config.js 配置文件中。

2.通过单独的配置文件配置项目

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

// vue.config.js
module.exports = {
  devServer: {
  port: 8888
  }
}

5. Element-UI 的基本使用

Element-UI：一套为开发者、设计师和产品经理准备的基于Vue (这里使用Vue 2.0) 的桌面端组件库。

官网地址为：地址

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

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

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

//src/App.vue
<template>
  <div id="app">
    <!-- element-ui -->
    <el-row>
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
    </el-row>
    <!-- element-ui -->
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

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

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

// src/main.js
import './plugins/element.js'