关于vue.js: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 脚手架生成的我的项目构造剖析

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.jsmodule.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.jsimport './plugins/element.js'