VUE进阶笔记叁章前端工程化

4.VUE脚手架4.1 VUE脚手架的基本用法Vue 脚手架就是一个命令行工具，用于快速生成 Vue 项目基础架构，从而可以简化Vue项目的创建过程。其官网地址为：https://cli.vuejs.org/zh/4.1.1 使用步骤安装 3.x 版本的 Vue 脚手架：npm install -g @vue/cli4.1.2 基于3.x版本的脚手架创建vue项目基于交互式命令行的方式，创建

立叶

174人浏览 · 2020-12-30 17:45:30

立叶 · 2020-12-30 17:45:30 发布

4.VUE脚手架

4.1 VUE脚手架的基本用法

Vue 脚手架就是一个命令行工具，用于快速生成 Vue 项目基础架构，从而可以简化Vue项目的创建过程。其官网地址为：https://cli.vuejs.org/zh/

4.1.1 使用步骤

安装 3.x 版本 的 Vue 脚手架：npm install -g @vue/cli

4.1.2 基于`3.x版本`的脚手架创建vue项目

基于 交互式命令行 的方式，创建新版 vue 项目；
vue create my-project

这里选择手动选择某些功能然后去创建项目，因此我们选中 Manually select features，按回车键。

接下来按上下键在不同的features切换，空格键选择我们要选择的features。这里我们选择了下图几个features，选择完成后按回车键。

此时它会询问我们是否安装历史模式的路由，由于推荐使用哈希模式的路由，所以输入n并且按回车键。

此时它会让我们选择ESLint的版本，因为推荐使用Standard config，所以上下键选中后回车

此时它询问我们什么时候进行ESLint语法规则校验，我们选择Lint on save后回车

接下来它询问我们Babel, ESLint等这些工具的配置文件怎么去进行创建。第二种方式是把这个工具的配置文件统一地都放在package.json中。在此处我们选择放在单独的配置文件中，即选择In dedicated config files。这样好维护些，保证package.json文件结构清晰不易混乱。

接下来它询问我们是否把当前做过的选择保存为一个模板，供我们后续再创建项目的时候可以直接使用模板，就不需要重新选择了。此处我们选择不保存，也就是n。

接下来就进入了项目的创建过程中，耐心等待

当项目创建完成之后，它提示我们可以执行 cd vue_proj_01命令进入到项目的根目录当中，然后执行 npm run serve 命令就可以把项目运行起来。

执行上述所提示的两个命令，等待项目编译成功后，它会弹出一个新的面板。我们选择面板中对应的地址http://localhost:8080/后，在浏览器地址栏中输入该地址回车就能看见这个创建出来的项目的效果了。
基于 图形化界面 的方式，创建新版 vue 项目；
vue ui

输入上述命令后会打开一个浏览器面板，之后我们就可以通过鼠标点击的方式来创建项目。之后点击创建来进入项目的创建面板，下面会有许多的目录选择框，我们可以选择项目的创建路径，现在我们把项目创建在D:\MyFile\MyVUE\3.vue_basic_str目录下，选择该目录后点击在此创建新项目。

在现在的面板中输入 项目名称 和 初始化 git 仓库信息，其他的选择默认。之后点击下一步

此时它询问我们是否进行一些相关的配置，由于我们是第一次进行配置，所以这里选择 手动 的方式进行配置。之后点击下一步

在接下来的面板中它询问我们要创建哪些工具，这里我们一定要安装Babel、Router、Linter/Formatter，所以这些选项都要选择打开。最后还要把使用配置文件这一项打开。因为打开使用配置文件之后，他会把那些配置工具和配置文件单独保存到.babelrc 文件中去，而不是把它们统一地放到package.json文件中去，那样不好。之后点击下一步

此时它询问我们是否使用历史模式的路由，我们让它默认关闭就好。它还询问我们选择linter/formatter config 配置文件，我们选择 ESLint + Standard config。最后，它询问我们 additional lint feature 选择哪个，这里选择 Lint on save。之后点击创建项目

此时它弹出一个新预设面板，询问我们是否将刚才的选择和配置保存为一个新的预设。我们这里输入预设名、保存预设并创建项目。

此时正在进行项目的创建，我们需要等待一些时间

之后进行一个仪表盘页面

选择左侧栏的任务，选择serve模式的编译，点击运行

点击启动app就可以看见这个新创建出来的项目的效果了
基于 2.x 的旧模板，创建旧版 vue 项目。
npm install -g @vue/cli-init
vue init webpack vue_proj_03

此时它询问我们项目名称，我们默认回车，询问项目描述，默认回车，询问作者名称，默认回车

此时它询问我们安装哪个版本的VUE。Runtime + Compiler: recommended for most users版本体积比较大，Runtime-only版本体积比较小，但基本可以满足我们的需求。在此我们选择安装Runtime-only版本，回车

此时它询问我们是否安装vue-router，此处选择安装，输入Y回车

此时它询问我们是否安装ESLint，此处选择安装，输入Y回车

此时它询问我们安装ESLint的语法版本，此时我们选择Standard版本，回车

此时它询问我们是否安装单元测试，此时我们选择不安装，输入n回车

此时它询问我们是否安装e2e测试，我们选择不安装，输入n回车

最后，它询问我们选择哪种方式去安装项目依赖包，我们选择NPM，回车

安装完成后，它提醒我们可以使用cd vue_proj_03命令进入到项目根目录中，执行npm run dev命令可以将项目运行起来。我们照做

编译完成后他提醒我们项目正运行在http://localhost:8080这个地址，我们在浏览器中打开这个地址

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

在这里插入图片描述

node_modules：依赖包目录
public：静态资源目录
src：组件源码目录
babel.config.js：Babel配置文件

4.3 VUE脚手架的自定义配置

4.3.1 通过 package.json 配置项目

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

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

4.3.2 通过单独的配置文件配置项目

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

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

在这里插入图片描述
运行npm run serve命令查看效果

5. Element-UI 的基本使用

Element-UI：一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。官网地址为： http://element-cn.eleme.io/#/zh-CN。

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

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

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

在这里插入图片描述

接下来使用Element-UI。首先在Element-UI官网复制代码
在这里插入图片描述
接下来找到项目根组件App.vue组件，将代码复制到根组件相应位置。保存后运行npm run serve命令查看效果

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

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

接下来测试element-ui是否安装成功。运行该项目，编译成功，则安装成功。

回到VScode编辑器，查看main.js多了如下代码

根据main.js中import './plugins/element.js'的提示，找到plugins目录下的element.js文件，查看内容

之后就可以使用element-ui了。如5.1 节所述，在官网复制代码到App.vue，然后运行npm run serve。