Vue CLI笔记

1.什么是Vue CLI

官网：https://cli.vuejs.org/zh/
■如果你只是简单写几个Vue的Demo程序那么你不需要Vue CLI.
■如果你在开发大型项目,那么你需要,并且必然需要使用Vue CUI

• 使用Vue.js开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情.

• 如果每个项目都要手动完成这些工作,那无疑效率比较低效,所以通常我们会使用一些脚手架工具来帮助完成这些事情。

■CU是什么意思?

• CL是Command-Line Interface,翻译为命令行界面,但是俗称脚手架.
• Vue CLI是一个官方发布vue.js项目脚手架
• 使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置.

2.Vue CLI使用前提- Node

■安装NodeJS

• 可以直接在官方网站中下载安装

• 网址: http://nodejs .cn/download/

■检测安装的版本

• 默认情况下自动安装Node和NPM
• Node环境要求8.9以上或者更高版本

■什么是NPM呢?

• NPM的全称是Node Package Manager
• 是-个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。

■cnpm安装

• 由于国内直接使用npm的官方镜像是非常慢的，这里推荐使用 淘宝NPM镜像。
• 可以使用淘宝定制的cnpm (gzip压缩支持)命令行工具代替默 认的npm

3.Vue CLI使用前提- Webpack

■Vue.js官方脚手架工具就使用了webpack模板

• 对所有的资源会压缩等优化操作

• 它在开发过程中提供了一套完整的功能,能够使得我们开发过程中变得高效。

■Webpack的全局安装（-g全局）

npm install webpack -g

4.Vue CLI的使用

■安装Vue脚手架（dos（win+r->cmd）中安装）

npm install -g @vue/cli

■注意：上面安装的是Vue CLI4版本，如果想按照cli2的方式初始化项目时是不可以的
拉取旧版本：cnpm install -g @vue/cli-init

新建一个文件夹，在文件夹中运行

vue init webpack my-project

新建项目，注意my-project项目名不要带有中文
安装完成后目录结构如下：

npm run build打包项目
package-lock.json中记录依赖的node相关模块真正应用到的版本

5.这里补充一个cli安装不上的问题

找到你电脑上的npm-cache文件夹(C:\Users\电脑用户名\AppData\Roaming中)删除（再删除之前先备份一下以免这个方法对你的电脑不好使）之后管理员权限运行DOS->cmd执行语句npm clean cache -force，之后再运行cli安装语句

6.runtimecompiler和runtimeonly

注意创建项目的时候vue build选项选择对应的runtimecompiler和runtimeonly

• 安装runtimecompiler

• 安装runtimeonly

• 如果在安装时打开了报错检测，可以去config/index.js文件下把useEslint值改为false

项目目录内容简介：

runtimecompiler和runtimeonly（区别）

■简单总结

• 如果在之后的开发中,你依然使用template ,就需要选择Runtime-Compiler

• 如果你之后的开发中,使用的是.vue文件夹开发,那么可以选择Runtime -only
  

• runtimecompiler中应用render
  方法一：
  
  
  方法二：
  
  
  如果我们把runtimecompiler中的createElement里的组件cpn换成App，会发现和runtimeonly中的main.js结构一样了
  

• 但是我们发现runtimeonly中的App中也有template，那会不会only中也要经历template->ast这个过程呢？
  答案是不会，template被编译出来的就是一个普通的对象，普通的对象里面已经将template渲染成render函数了。我们在main.js中console.log(App),会发现里面是没有template的
  

• 那么.vue文件中的template是由谁处理的了?
  是由vue-template-compiler
  我们之前在.vue文件封装处理的时候有安装vue-loader和vue-template-compiler,vue-loader用来加载.vue文件，vue-template-compiler用来解析

npm run build

npm run dev

7.修改配置：webpack.base.conf.js起别名

这个我之前在写项目的时候，公司有个框架，写那个框架的人在代码中写了一些缩写的别名，注意一下就可以了现在这里，看别人的代码发现不懂得看看这里是不是有取别名

8.认识vue cli4

vue-cli 3 与 2 版本有很大区别

• vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3

• vue-cli 3 的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录

• vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化

• 移除了static文件夹，新增了public文件夹，并且index.html移动到public中

创建项目（以下是cli4创建过程）

我跟着视频课学习是cli3的创建过程，目前cli3和cli4我只发现目录结构不一样了，后续又不一样的地方再写

vue create testcli4（项目名）

当我们下次再vue create testcli4创建项目时，会有选项让我们选择刚才建的这个项目的相关配置，

如果我们想删除之前的配置的话去C盘下的Users(用户)文件夹的当前电脑用户名文件夹下找到



当我们新创建文件时

会询问我们是否添加到git上，选择‘Add‘，新添加的文件从红变绿


webstorm的git操作使用https://www.cnblogs.com/yesu/p/10642385.html

目录结构解析

忽略掉项目名称建完之后我才发现我的是cli4


我们发现cli4相比较于cli2少了很多相关配置，那这些配置去哪了呢？
在这里

9.Vue UI

在终端或者dos运行都可以

vue ui

了解有这个东西就行先，以后在项目中用到了再另写一篇补充

10.箭头函数

基本使用

箭头函数: 也是一种定义函数的方式

• 定义函数的方式: function

  const aaa = function () {}

• 对象自变量中定义函数

  const obj = {
    bbb() {}
  }

• ES6中的箭头函数

const ccc = (参数列表) => {}
const ccc = () => {}

参数和返回值问题:

• 放入两个参数

const sum = (num1, num2) => {
    return num1 + num2
}

• 放入一个参数

  const power = num => {
    return num * num
  }

• 函数中，函数代码块中有多行代码时

  const test = () => {
    // 1.打印Hello World
    console.log('Hello World');

    // 2.打印Hello Vuejs
    console.log('Hello Vuejs');
  }

• 函数代码块中只有一行代码

const mul = (num1, num2) => {
   return num1 + num2
 }

const mul = (num1, num2) => num1 * num2
console.log(mul(20, 30));

main.js中的

render:h=>{
	return h(App)
}

可以改写为

render:h=>h(App),

this的使用

• 什么时候使用箭头

 setTimeout(function () {
  console.log(this);//window
 }, 1000)
 setTimeout(() => {
  console.log(this);//window
 }, 1000)

• 问题: 箭头函数中的this是如何查找的了?
• 答案: 向外层作用域中, 一层层查找this, 直到有this的定义.
  在obj对象中建一个函数aaa

 const obj = {
   aaa() {
     setTimeout(function () {
       console.log(this); // window
     })

     setTimeout(() => {
       console.log(this); // obj对象
     })
   }
 }
 obj.aaa()

 const obj = {
    aaa() {
      setTimeout(function () {
        setTimeout(function () {
          console.log(this); // window
        })

        setTimeout(() => {
          console.log(this); // window
        })
      })

      setTimeout(() => {
        setTimeout(function () {
          console.log(this); // window
        })

        setTimeout(() => {
          console.log(this); // obj,找的是aaa中的this
        })
      })
    }
  }

  obj.aaa()

可以理解为，这种格式的显示的都是window

setTimeout(function () {
     console.log(this);
 })

除了箭头函数，其他函数的this指向是谁调用的就指向谁
（以上内容根据微博“coderwhy”的vue视频课程整理）