vuecli

二、Vue Cli     

                                   ps:仅供本人记忆

2.1 Vue Cli 介绍 及 使用

2.1.1 Vue Cli的介绍

• 什么是Vue Cli？
  • Vue CLI是一个官方发布 vue.js 项目脚手架
  • 使用 vue cli可以快速搭建Vue开发环境（项目目录结构）以及对应的webpack配置.

• Vue CLI 使用前的预备知识：
  • 要有Node运行环境，了解Node的第三方模块。参考：Node => 第三方模块
  • 全局安装webpack，了解webpack的相关配置。参考： webpack

• Vue Cli原理：
  • 基于webpack所搭建的项目，最好先去学习以下webpack

2.1.2 Vue Cli 的使用

• Vue Cli可以快速帮助我们搭建Vue项目的目录结构以及对应的webpack配置
• Vue Cli的使用
  1. 全局安装Vue脚手架：npm i @vue/cli@3.2.1 -g，这里全局安装的是Vue Cli3版本
  2. 现阶段我们不仅要看Vue Cli3搭建的项目结构，也要看Vue Cli2所搭建的项目结构
     • 全局安装npm i @vue/cli-init -g：拉取Vue Cli2所搭建的项目结构模板

• Vue CLI2初始化项目
  • 在项目中执行vue init webpack 项目名称命令
• Vue CLI3初始化项目
  • 在项目中执行vue create 项目名称命令
• 项目名称统一英文小写

2.2 Vue Cli2

2.2.1 初始化项目过程

• Vue Cli2 初始化项目过程，先执行vue init webpack 项目名称命令
  •  

2.2.2 项目目录结构

• Vue Cli2 目录结构详解
  •  

• package.json的脚本命令
  •  

2.2.3 解决打包后页面空白

• 解决Vue Cli2打包项目后，打开index.html文件空白问题
  • 找到build文件夹，在webpack.prod.conf.js 第25行左右 有一个对象为 output,增加一个属性

• • publicPath: './',

2.2.4 Vue版本的区别

• 在使用Vue Cli2初始化项目时，会发现他会要求我们选择一个Vue版本进行开发
  •  

• 下面我们来分析Runtime-Compiler和Runtime-only的区别
  •  
  • 我们会发现一个是使用tamplate替换el所挂载的区域，一个是使用render函数替换el挂载的区域
  • 参考：Vue （一） => Vue的配置选项 => 选项 / DOM => tamplate或render
• 简单总结：
  • 如果在入口JS文件中，你依然使用template来替换el所挂载的区域，就需要选择Runtime-Compiler版本
  • 如果在入口JS文件中，你使用的是render函数来替换el所挂载的区域，那么可以选择Runtime-only版本

• Runtime-Compiler版本渲染页面过程：
  • template -> ast -> render -> vdom -> UI
• Runtime-only 版本（1. 性能更高 2. 该版本的代码量少 推荐）
  • render -> vdom -> UI
  • 无法在入口JS文件中通过template替换el所挂载的区域

• Vue程序运行过程 （了解）
  •  

2.3 Vue Cli3

2.3.1 Vue Cli2和3的区别

• vue-cli 3 的设计原则是“0配置”，移除了配置文件build和config等目录
• vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化
• 移除了static文件夹，新增了public文件夹，并且index.html移动到public中
• vue-cli2 的入口JS文件，使用的是el选项挂载模板区域，而vue-cli3中却是使用$mount()进行挂载
• vue-cli2在初始化项目时，可以让我们选择vue的版本，vue-cli3则是默认选择Runtime-only版本

2.3.2 初始化项目过程

• Vue Cli3 的初始化过程。 先执行vue create 项目名称命令
  •  

2.3.3 项目目录结构

• Vue Cli3目录结构详解
  •  

• pakcage.json中的脚本命令
  •  
  • 在serve属性中添加一个--open，执行npm run serve 命令后会自动打开项目页面

2.3.4 解决打包后页面空白

• 解决Vue Cli3打包后，页面空白问题
  • 在项目根目录下新建vue.config.js文件，然后写入如下配置

• • module.exports = {
       publicPath: './'
    }

• • 重新打包即可正常显示页面了

2.3.5 Vue Cli3 的配置文件

• vue-cli3 将配置文件被隐藏起来的初衷：1. 为了不希望开发者随意的更改配置相关信息 2. 简化了项目目录结构
• 如果我们真的需要更改其webpack相关的配置文件，vue-cli3为我们提供了两个方案

• 方案一：在命令行中执行vue ui命令，会打开一个浏览器窗口，导入用vue-cli3所创建的项目
  •  

• 方案二：在项目的根目录下新建vue.config.js文件，在该文件下编写要修改的webpack相关配置
  •  

• 在VUE-CLI3中配置路径别名，要在vue.config.js中写入如下配置

• • module.exports = {
       configureWebpack: {
         resolve: {
           alias: { // 配置路径别名 @：相当于src文件夹
             '@': 'src',
             'assets': 'src/assets',
             'network': 'src/network',
             'views': 'src/views',
          }
        }
      }
    }

• 在HTML模板中使用路径别名引入文件时，需要在别名前在~符号

• • <img src="~assets/img/tab-bar/home.svg" alt="">

• 在JS中使用路径别名引入文件时，可以直接使用路径别名

• • import TabBar from '@/components/TabBar/TabBar'