目录

  • 主要内容
  • 1. 模块化相关规范
    • 1.1 模块化概述
    • 1.2 模块化规范
      • A. 浏览器端的模块化
      • B. 服务器端的模块化
      • C. 大一统的模块化规范 – ES6模块化
    • 1.3 体验ES6模块化 - 在 NodeJS 中安装 babel
      • 1.3.1 安装 babel
        • A. 安装 babel
        • B. 创建 babel.config.js
        • C. 创建 index.js 文件
        • D. 使用 npx 执行文件
    • 1.4 ES6 模块化的基本语法
      • 1.4.1 默认导出与导入
        • A. 默认导出
        • B. 默认导入
      • 1.4.2 按需导入 与 按需导出
        • A. 按需导出
        • B. 按需导入
      • 1.4.5 直接导入并执行模块代码
  • 2. webpack
    • 2.1 webpack概述
    • 2.2 webpack 的基本使用
    • 2.3 webpack 中的加载器
      • 2.3.1 通过 **loader** 打包非 js 模块
      • 2.3.2 loader 的调用过程
    • 2.4 加载器的基本使用
      • 2.4.1 打包处理 CSS 文件
      • 2.4.2 打包处理 less 文件
      • 2.4.3 打包处理 scss 文件
      • 2.4.4 配置 post-css 自动添加 css 的兼容性前缀（-ie-,-webkit-）
      • 2.4.5 打包样式表中的图片和字体文件
      • 2.4.6 打包 js 文件中的高级语法
  • 3. Vue单文件组件
    • 3.1 传统 Vue 组件的缺陷
    • 3.2 解决方案
    • 3.3 webpack 中配置 vue 组件的加载器
    • 3.4 在 webpack项目中使用 vue
    • 3.5 使用 webpack 打包发布项目
  • 4. Vue 脚手架
    • 4.1 Vue 脚手架的基本用法
    • 4.2 **分析Vue脚手架生成的项目结构**
    • 4.3 Vue 脚手架的自定义配置
  • 5. Element-UI 的基本使用
    • 5.1 基于命令行方式手动安装
    • 5.2 基于图形化界面自动安装

主要内容

  • 模块化的相关规范；
  • webpack；
  • 使用Vue单文件组件；
  • 搭建Vue脚手架；
  • Element-UI 的使用

1. 模块化相关规范

1.1 模块化概述

模块化，就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块。

模块化开发的 好处：方便代码的重用，从而提升开发效率，并且方便后期的维护

1.2 模块化规范

A. 浏览器端的模块化

1). AMD（Asynchronous Module Definition，异步模块定义），代表产品为：Require.js(https://requirejs.org)。

2). CMD（Common Module Definition，通用模块定义），代表产品为：Sea.js(https://seajs.github.io/seajs/docs)

B. 服务器端的模块化

服务器端 的模块化规范是使用 CommonJS 规范：

1). 模块成员导出：exports 或者 module.exports ；
2). 模块成员导入：require(“模块标识符”) ；
3). 模块分为：单文件模块 与 包（一个文件 就是一个模块，都拥有 独立的作用域）。

C. 大一统的模块化规范 – ES6模块化

ES6模块化规范中定义：

1). 每一个js文件都是独立的模块；
2). 导入模块成员：使用import关键字；
3). 暴露模块成员：使用export关键字。

【小结】：推荐 使用 ES6模块化，因为 AMD，CMD 局限使用与浏览器端，而CommonJS 在服务器端使用。

ES6模块化 是 浏览器端 和 服务器端 通用的规范 。

总结如下：

1.3 体验ES6模块化 - 在 NodeJS 中安装 babel

在 Node 中，通过 babel 体验 ES6 模块化 。

1.3.1 安装 babel

babel：一个语法转换工具，可以把高级的 JavaScript 代码，转换为低级的、没有兼容性问题的 JavaScript 代码，

步骤如下：

项目根目录下进行如下几步：

  1. npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
  2. npm install --save @babel/polyfill
  3. 创建文件 babel.config.js
  4. 通过 npx babel-node index.js 执行代码

A. 安装 babel

  1. 打开终端，输入命令：

    npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node

    安装过程如下所示：

  2. 安装完毕之后，再次输入命令安装：

    npm install --save @babel/polyfill

B. 创建 babel.config.js

  1. 在项目目录中创建babel.config.js文件。

    编辑 JavaScrpt 文件中的代码如下：

    const presets = [  ["@babel/env",{targets:{edge:"17",firefox:"60",chrome:"67",safari:"11.1"}}]
]
//暴露
module.exports = { presets }

    presets 是一个 语法转换数组，里面提供了转换期间可能要用到的一些语法转换插件。

    其中，@babel/env就是一个语法转换插件（也就是preset-env），里面提供了targets节点，表示转换完毕后的那些代码，起码要支持对象里所列出的 edge、firefox、chorme、safari 这些浏览器。

    最后，把exports通过module.exports向外暴露出去，供 babel 使用。

    运行 npx 命令（高版本的 npm 中，已默认提供，可直接通过 npx 来运行某些cli的命令），启动 babel ：

    npx bebel-node index.js

    babel 在运行之前，会先读取 babel.config.js中的配置信息，然后根据指定的配置信息，来做相关的代码转换。

C. 创建 index.js 文件

在项目目录中创建index.js文件作为入口文件

在index.js中输入需要执行的 js 代码，例如：

console.log("ok");

D. 使用 npx 执行文件

打开终端，输入命令：

npx babel-node ./index.js

1.4 ES6 模块化的基本语法

1.4.1 默认导出与导入

  • 默认导出语法：export default 默认导出的成员

  • 默认导入语法：import 接收名称 from '模块标识符'

    注意：每个模块中，只允许使用 唯一 的一次 export default，否则会报错！

A. 默认导出

  1. 创建 m1.js 文件

    let a = 10
let c = 20
let d = 30
function show() {console.log('默认导出');
}export default {a,c,show
}

  1. 创建 index.js 文件

    import m1 from './模块路径'：这里的 m1 是接收名称 ，可任意命名（只要合法）。

  2. 项目终端运行 npx 命令：

    npx babel-node .\index.js

    如下图所示：

    可以看到，打印出的对象中，没有包含d属性，因为它 没有在 m1 模块中默认导出。

B. 默认导入

import 接收名称 from “模块标识符”，如下：

import test from "./test.js"

注意： 在一个模块中，只允许 使用export default 向外默认 暴露一次 成员，千万不要写多个export default。

如果在一个模块中没有向外暴露成员，其他模块引入该模块时将会得到一个空对象。

1.4.2 按需导入 与 按需导出

A. 按需导出

export let num = 998;
export let myName = "jack";
export function fn = function(){ console.log("fn") }

注： 每个模块中，可以使用 多次 按需导出（ “默认导出” 只能一次）。

B. 按需导入

import { num,fn as printFn ,myName } from "./test.js"
//同时导入默认导出的成员以及按需导入的成员
import test,{ num,fn as printFn ,myName } from "./test.js"

注意： 一个模块中既可以按需导入也可以默认导入，一个模块中既可以按需导出也可以默认导出。每个模块中，可以使用多次按需导出

1.4.5 直接导入并执行模块代码

如果只想单纯执行某个模块中的代码，并不需要得到模块中向外暴露的成员，此时，可以直接导入并执行模块代码。

// 当前文件模块为 m2.js// 在当前模块中执行一个 for 循环操作
for(let i = 0; i < 3; i++) {console.log(i)}

直接导入：

import "./test2.js";

2. webpack

2.1 webpack概述

webpack 是一个流行的前端项目构建工具，可以解决目前 web 开发的困境。

webpack 提供了模块化支持，代码压缩混淆，解决js兼容问题，性能优化等特性，提高了开发效率和项目的可维护性。

目前绝大多数企业中的前端项目，都是基于 webpack 进行打包构建的。

2.2 webpack 的基本使用

  1. 创建项目目录并初始化

    创建项目，并打开项目所在目录的终端，输入命令

    npm init -y

  1. 创建首页及 js 文件

    在项目目录中创建 index.html 页面，并初始化页面结构：在页面中摆放一个 ul，ul 里面放置几个 li，在项目目录中创建 js 文件夹，并在文件夹中创建 index.js 文件。

  2. 安装 jQuery

    打开项目目录终端，输入命令:

    npm install jQuery -S

  1. 导入 jQuery

    打开index.js文件，编写代码导入 jQuery 并实现功能：

    import $ from "jquery";
$(function(){$("li:odd").css("background","cyan");$("li:odd").css("background","pink");
})

    注意： 此时项目运行会有 错误，原因是import $ from "jquery";这句代码属于ES6的 新语法代码，在浏览器中可能会存在 兼容性 问题，所以我们需要安装 webpack 来帮助我们解决这个问题。

  2. 安装 webpack

    打开项目目录终端，输入命令:

    npm install webpack@4.43.0 webpack-cli@3.3.11 -D

    此处为安装指定的版本4.43.0和3.3.11，不指定版本即默认安装最新版本（如果运行示例可能会报错）。

    【关于参数 -S -D】：

    1）-S 即--save（保存）：自动把包名、版本号等注册到package.json的dependencies里，生产环境下该包的依赖依然存在；——生产阶段要使用的组件

    2）-D 即--dev（生产）：自动把包名、版本号等注册到package.json的devDependencies里（如果是仅需在开发环境下存在的包，就用-D，如 babel，sass-loader等解析器）—— 仅开发阶段使用的组件（不会进行最后的真正打包，只用来转换）；

  1. 配置 webpack

    在项目根目录中，创建一个 webpack.config.js 的配置文件用来配置 webpack。如下：

    module.exports = {//构建模式，可以设置为development(开发模式)，production(发布模式)mode:"development"
}

    补充： mode 设置的是项目的编译模式。

    如果设置为development则表示项目处于开发阶段，不会进行压缩和混淆，打包速度会快一些；

    如果设置为production则表示项目处于上线发布阶段，会进行压缩和混淆，打包速度会慢一些。

  2. 添加运行脚本dev

    在项目中的 package.json 文件中，添加运行脚本dev，如下：

    "scripts":{"dev":"webpack"
}

    注： scripts 节点下的脚本，可以通过 npm run 在终端运行。

      npm run dev

    将会启动 webpack 进行项目打包。

  3. 项目打包

    在项目目录终端中输入命令：

    npm run dev

    回车后，开始运行dev命令进行项目打包。

  4. 页面中引入项目打包生成的 js文件

    等待 webpack 打包完毕之后，找到默认的dist路径中生成的main.js文件，将其引入到 html 文件中。

  5. 设置 webpack 的打包 入口 / 出口
    在 webpack 4.x 中，默认会将src/index.js 作为默认的打包入口 js 文件。
    默认会将dist/main.js作为默认的打包输出 js 文件，如果不想使用默认的 入口 / 出口 js 文件，我们可以通过改变 webpack.config.js 来设置入口/出口的 js 文件，如下：

    const path = require("path");
module.exports = {mode:"development",//设置入口文件的绝对路径entry: path.join(__dirname,"./src/xx.js"),//设置出口文件output:{//设置输出文件的存放的绝对路径path:path.join(__dirname,"./dist"),//设置输出文件的名称filename:"res.js"}
}

  6. 设置 webpack 的自动打包

    默认情况下，我们更改入口 js 文件的代码，需要重新运行命令打包 webpack，才能生成出口的 js 文件，每次都要重新执行命令打包，这是一个非常繁琐的事情，那么，自动打包 可以解决这样繁琐的操作。

    ---------------【实现自动打包功能的步骤】---------------

    1） 安装自动打包功能的包：webpack-dev-server

    npm install webpack-dev-server -D

    2）修改package.json中的dev指令：

    "scripts":{"dev":"webpack-dev-server"
}

    3）将引入的 js 文件路径更改为：

    <script src="/bundle.js"></script>

    4）运行打包命令：

    npm run dev

    5）打开网址查看效果，网址：

    http://localhost:8080

    注： webpack-dev-server自动打包 的 输出文件，默认放到了服务器的 根目录 中。

    【补充】：自动打包完毕之后，默认打开服务器网页，实现方式就是打开package.json文件，修改dev命令：

    "dev": "webpack-dev-server --open --host 127.0.0.1 --port 9999"

  7. 配置 html-webpack-plugin，生成预览页面

    使用 html-webpack-plugin 可以生成一个预览页面。

    由于当我们访问默认的 http://localhost:8080/的时候，看到的是一些文件和文件夹，想要查看页面时还需要点击文件夹 / 点击文件才能查看，那么我们希望默认就能看到一个页面，而不是看到文件夹或者目录。

    -------------【实现默认预览页面功能的步骤】--------------

    1）安装生成预览页面的插件：html-webpack-plugin

    npm install html-webpack-plugin -D

    2）修改 webpack.config.js 文件头部区域，添加如下配置信息：

    // 导入生成预览页面的插件，得到一个 构造函数
const HtmlWebpackPlugin = require("html-webpack-plugin");
//创建插件的实例对象
const htmlPlugin = new HtmlWebpackPlugin({//指定生成预览页面的模板文件template:"./src/index.html",//设置生成的文件的名称filename:"index.html"
})

    注： 生成的文件名称存在于内存中，在目录中不显示。

    3）向外暴露配置对象
         继续修改 webpack.config.js 文件，添加 plugins 配置信息：

    module.exports = {......plugins:[ htmlPlugin ]
}

    plugins 数组，是 webpack 打包期间会用到的一些插件的集合。

  8. 配置自动打包相关的参数

    package.json中的配置参数说明

    参数 说明
    --open 打包完成后自动打开浏览器页面
    --host 配置 IP 地址
    --port 配置端口

    代码示例：

    "scripts": {"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
},

2.3 webpack 中的加载器

2.3.1 通过 loader 打包非 js 模块

实际开发中，webpack 默认只能打包 处理以.js后缀名结尾的模块。其它 非 js 文件，需要调用 loader 加载器 才可以正常打包，否则会报错。

loader 加载器可以协助 webpack 打包处理特定的文件模块。包含：

  • less-loader：可以打包处理.less相关的文件
  • sass-loader：可以打包处理.scss相关的文件
  • url-loader：打包处理css中与url路径有关的文件
  • babel-loader：处理高级js语法的加载器
  • postcss-loader：自动添加 css 的兼容前缀
  • css-loader,style-loader：打包处理.css相关的文件

注意：指定多个 loader 时的顺序是 固定 的，而调用 loader 的顺序是 从后向前 进行调用。

2.3.2 loader 的调用过程

2.4 加载器的基本使用

2.4.1 打包处理 CSS 文件

  • 安装包

    安装处理 css 文件的 loader：

    npm install style-loader css-loader -D

  • 配置规则

    在webpack.config.js 的 module -> rules 数组中，添加 loader 规则 如下：

    module.exports = {......plugins:[ htmlPlugin ],module : {rules:[{//需要匹配的文件类型，支持正则test:/\.css$/,//use表示该文件类型需要调用的loaderuse:['style-loader','css-loader']}]}
}

    其中，test 表示匹配的文件类型， use 表示对应要调用的 loader 。

    注：

    • use 数组中指定的 loader 顺序是 固定 的；
    • 多个 loader 的 调用顺序：从后往前调用。

2.4.2 打包处理 less 文件

安装 less，less-loader 处理 less 文件

  1. 安装包

    npm install less-loader less -D

  1. 配置规则

    在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

     module.exports = {......plugins:[ htmlPlugin ],module : {rules:[{test:/\.less$/,use:['style-loader','css-loader','less-loader']}]}}

2.4.3 打包处理 scss 文件

安装 sass-loader，node-sass 处理 less 文件

  1. 安装包

    npm install sass-loader node-sass -D

  1. 配置规则

    在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下

    module.exports = {......plugins:[ htmlPlugin ],module : {rules:[{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}]}}

    补充：安装 sass-loader 失败时，大部分情况是因为网络原因，详情参考：

    https://segmentfault.com/a/1190000010984731?utm_source=tag-newest

2.4.4 配置 post-css 自动添加 css 的兼容性前缀（-ie-,-webkit-）

  1. 安装包

    npm install postcss-loader autoprefixer -D

  1. 创建并配置文件

    在项目根目录中创建 postcss 的配置文件 postcss.config.js，并初始化如下配置：

    // 导入自动添加前缀的插件
const autoprefixer = require("autoprefixer");module.exports = {plugins:[ autoprefixer ]  // 挂载插件
}

  1. 修改规则

    在 webpack.config.js 的 module -> rules 数组中，修改 css 的 loader 规则如下：

     module.exports = {......plugins:[ htmlPlugin ],module : {rules:[{//test设置需要匹配的文件类型，支持正则test:/\.css$/,//use表示该文件类型需要调用的loaderuse:['style-loader','css-loader','postcss-loader']}]}}

2.4.5 打包样式表中的图片和字体文件

在样式表 css 中有时候会设置背景图片和设置字体文件，一样需要 loader 进行处理。

使用 url-loader 和 file-loader 来处理打包图片文件以及字体文件：

  1. 安装包

    npm install url-loader file-loader -D

  1. 配置规则

    在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

     module.exports = {......plugins:[ htmlPlugin ],module : {rules:[{test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,//limit用来设置字节数，只有小于limit值的图片，才会转换//为base64图片use:"url-loader?limit=16940"}]}}

    其中 ? 之后是 loader 的参数项。 limit 用来指定图片的大小（单位：字节byte)，只有小于limit大小的图片，才会被转为 base64 图片。

2.4.6 打包 js 文件中的高级语法

在编写 js 的时候，有时候我们会使用高版本的 js 语法。

有可能这些 高版本的语法 不被兼容，需要将之打包为 兼容性的 js 代码 。

安装babel 转换器相关的包：

  1. 安装 babel 转换器

    npm install babel-loader @babel/core @babel/runtime -D

  1. 安装 babel 语法相关的插件包

    npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

  1. 创建 babel.config.js 文件并初始化配置

    在项目根目录中，创建 babel 配置文件babel.config.js并初始化基本配置如下：

    module.exports = {presets:["@babel/preset-env"],plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
}

  1. 添加规则

    在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

    module.exports = {......plugins:[ htmlPlugin ],module : {rules:[{test:/\.js$/,use:"babel-loader",//exclude为排除项，意思是不要处理node_modules中的js文件exclude:/node_modules/}]}
}

3. Vue单文件组件

3.1 传统 Vue 组件的缺陷

  • 全局定义的组件不能重名，字符串模板缺乏语法高亮，不支持 css (当 html 和 js 组件化时，css 没有参与其中)
  • 没有构建步骤限制，只能使用 H5 和 ES5，不能使用预处理器（babel）

3.2 解决方案

  • 使用 Vue 单文件组件（后缀名为.vue）；

  • Vue 单文件组件由 三部分组成：

    • template 组件组成的 模板 区域 ；
    • script 组成的 业务逻辑 区域；
    • style 样式 区域 。

    代码如下：

    <template>组件代码区域
</template><script>js代码区域
</script><style scoped>样式代码区域
</style>

    scoped的作用：实现组件的 私有化，不对全局造成样式污染。

    即，当前style的属性只属于当前模块。当<style>标签具有该scoped属性时，其 css 将仅应用于 当前组件的元素。

    补充：安装 Vetur 插件 可以使得.vue文件中的 代码高亮。

3.3 webpack 中配置 vue 组件的加载器

  1. 安装 vue 组件的加载器

    npm install vue-loader vue-template-compiler -D

  1. 配置规则

    在 webpack.config.js 配置文件中，添加 vue-loader 的配置项如下：

    const VueLoaderPlugin = require("vue-loader/lib/plugin");
const vuePlugin = new VueLoaderPlugin();
module.exports = {......plugins:[// ... 其它插件htmlPlugin,vuePlugin  ],module : {rules:[...//其他规则{ test:/\.vue$/,loader:"vue-loader",        }]}
}

3.4 在 webpack项目中使用 vue

想要让 vue 单文件组件能够使用，必须要 安装 vue，并使用 vue 来引用 vue 单文件组件。

  1. 安装 Vue

    npm install vue -S

  1. 在 index.js 中导入 Vue

    在 src →\rightarrow→ index.js 入口文件中，导入 Vue 构造函数：

    1）导入构造函数

    import Vue from 'vue'

    2）导入根组件

    import App from './components/App.vue'

  1. 创建 Vue 实例对象并指定要控制的 el 区域，再使用 render 函数渲染 App 根组件。

    const vm = new Vue({el:"#first",// 通过 render 函数，把指定的组件渲染到 el 区域render:h=>h(App)
})

3.5 使用 webpack 打包发布项目

项目上线之前，需要通过 webpack 将应用进行整体打包.

  1. 通过 package.json 配置打包命令

    "scripts":{// 用于打包的命令"build": "webpack -p",// 用于开发调试的命令"dev":"webpack-dev-server --open --host 127.0.0.1 --port 3000"
}

    该命令默认加载项目根目录中的 webpack.config.js 配置文件。

  2. 在项目打包之前，可以将 dist 目录删除，生成全新的 dist 目录。

4. Vue 脚手架

4.1 Vue 脚手架的基本用法

Vue脚手架 用于快速生成 Vue 项目基础架构。其官网地址为：https://cli.vuejs.org/zh/

使用步骤：

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

    npm install -g @vue/cli

    注： 3.x 兼容 2.x，所以这里安装高版本。

  2. 基于3.x 版本的脚手架 创建 Vue 项目：

    • 使用命令创建新版 Vue 项目

      vue create my-project

      选择 Manually select features (选择特性以创建项目)
      （勾选特性，按下空格键即可进行勾选。）
      是否选用历史模式的路由：n
      ESLint选择：ESLint + Standard config
      何时进行ESLint语法校验：Lint on save（这个是默认的）
      babel，postcss等配置文件如何放置：In dedicated config files(单独使用文件进行配置)
      是否保存为模板：n
      使用哪个工具安装包：npm

    • 基于 ui 界面（图形化）创建新版 Vue 项目

      命令：vue ui

      在自动打开的创建项目网页中配置项目信息。

    • 基于2.x 的旧模板，创建旧版 Vue 项目

      npm install -g @vue/cli-init
vue init webpack my-project

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

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 配置文件；
  • eslintrc.js:

4.3 Vue 脚手架的自定义配置

  1. 方式一：通过 package.json 配置项目 [不推荐使用]

    示例如下：

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

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

  1. 方式二：通过单独的配置文件进行配置

    ① 在项目的根目录创建文件 vue.config.js ；

    ② 在该文件中进行相关配置，从而覆盖默认配置。

    示例如下：

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

5. Element-UI 的基本使用

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

官网地址：https://element.eleme.cn/#/zh-CN

补充，基于 Vue 3.0 版本的 Element-UI 已发布，官方地址为：

国内站点：https://element-plus.gitee.io/#/zh-CN

或

国外站点：https://element-plus.org/#/zh-CN/guide/design

Vue 3.0 官网：https://vue3js.cn/docs/

5.1 基于命令行方式手动安装

  1. 安装依赖包

    npm install element-ui -S

  2. 导入使用：

    导入 Element-UI 相关资源

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

5.2 基于图形化界面自动安装

  1. cmd打开控制台，输入vue ui并回车运行该命令

    自动打开浏览器页面

  2. 通过 Vue 项目管理器，进入具体的项目配置面板

  3. 点击 插件 -> 添加插件，进入插件查询面板

  4. 搜索 vue-cli-plugin-element 并安装

  5. 配置插件，实现按需导入，从而减少打包后项目的体积

vue 全家桶 - 前端工程化相关推荐

  1. vue取div当前宽度_【前端大神面考面试官系列】入门Vue全家桶

    (给达达前端加星标,提升前端技能) 面试官问:Vue如何安装的呢? 达达回答:Vue的安装可以从两个方面进行安装,第一种是CDN引入,第二种是NPM安装. CDN引入 <script src=& ...

  2. 【前端大神面考面试官系列】入门Vue全家桶

    (给达达前端加星标,提升前端技能) 面试官问:Vue如何安装的呢? 达达回答:Vue的安装可以从两个方面进行安装,第一种是CDN引入,第二种是NPM安装. CDN引入 <script src=& ...

  3. Vue 全家桶 + Electron 开发的一个跨三端的应用

    GitHub Repo:vue-objccn Follow: halfrost · GitHub 项目地址:https://github.com/halfrost/vue-objccn 利用 Vue. ...

  4. Vue 全家桶 + Electron 开发的一个跨三端的应用 1

    代码地址如下: http://www.demodashi.com/demo/11738.html GitHub Repo:vue-objccn Follow: halfrost · GitHub 利用 ...

  5. Vue全家桶 + webpack 构建单页应用初体验

    文章指南 主题   承接这上一篇Vue + Webpack 构建模块化开发框架详解,我们知道了如何使用webpack对vue进行打包,从而开始我们的前端模块化开发之路,这一篇在上一篇的基础上讲解 Vu ...

  6. Vue全家桶仿网易优选商城APP源码

    介绍: Vue全家桶仿优选商城APP源码,只写了前端,用到的技术栈是Vue全家桶.mintUI.axios,没有实现后端接口,全部是抓包至商城App接口. 实现了挺多的功能的,比如首页.商品列表.商品 ...

  7. vue全家桶开发的一些小技巧和注意事项

    作者:沉末_ https://juejin.im/user/5b7c1be9e51d4538b35bfc32 前言 用vue全家桶开发一年多了,踩过不少坑,也解决了很多的问题,把其中的一些点记录下来, ...

  8. vue全家桶+koa2+mongoDB打造全栈社区博客

    背景 一直以来都想自己编写一个自己的社区博客,后来在网上找了一下,最后决定参考慕课网的一个社区项目,决定改用vue2.6+AntdForVue+koa2+mongoose实现一套社区博客. 简介 这是 ...

  9. 视频教程-Vue全家桶前后台分离实战案例（含资料）-Vue

    Vue全家桶前后台分离实战案例(含资料) 张长志技术全才.擅长领域:区块链.大数据.Java等.10余年软件研发及企业培训经验,曾为多家大型企业提供企业内训如中石化,中国联通,中国移动等知名企业.拥有 ...

最新文章

  1. Yuan先生的博客网址
  2. boost::spirit模块实现演示自定义的、用户定义的类型如何作为标记值类型轻松地与词法分析器集成
  3. 2018集训队日常训练1
  4. linux里的进程简介
  5. 【转】DCMTK各模块说明！！！！！！！
  6. linux nginx完全卸载
  7. 正版phpStorm2019激活，phpStorm图文教程（转）
  8. Chapter 7 代理模式
  9. 使用GDB调试Android NDK native(C/C++)程序-转
  10. 用R将图片转为字符画
  11. Winsock—I/O模型之事件选择模型(一)
  12. 传智播客-刘意-java深入浅出精华版学习笔记Day03
  13. 3dmax 保存慢 卡死
  14. laravel php的if判断,Thinkphp框架和Laravel框架的区别
  15. 2019年大前端技术趋势深度解读
  16. filebox管理php,filebox.php
  17. OrCAD 与 Cadence Allegro PCB 入门 - 以 16.6版本为例 （3）
  18. Window之删除云盘在设备和驱动器上的图标
  19. 软件测试--【软件测试和bug】
  20. python程序设计第三版约翰策勒第六章编程练习答案

热门文章

  1. 一张图 综合交通 解决方案_航天智慧环保 | 重庆跳蹬河智慧水务管理系统解决方案—应用篇...
  2. 23种设计模式之迭代器模式
  3. 微博机器学习平台云上最佳实践
  4. ​如何让技术想法更容易被理解?
  5. 如何利用全站加速，提升网站性能和用户体验？
  6. 汇报时，如何让老板快速抓住重点？—— 黄金三步法
  7. 应用实时监控 ARMS 上线用户行为回溯功能
  8. MongoDB 如何使用内存？为什么内存满了？
  9. 带你玩转Logview: MaxCompute Logview参数详解和问题排查
  10. 提升普适性，阿里云官方SDK发布支持Go语言SDK