vue-cli

CLI

网站：https://cli.vuejs.org/

什么是vue cli

• 如果你只是简单的写几个vuedemo程序，那么你不需要vue cli
• 如果你在开发大型项目，那么你需要，并且必然需要使用vue cli
  • 使用vue.js开发大型项目时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情
  • 如果每个项目都要手动完成这些工作，那无疑效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情
• CLI是什么意思
  • CLI 是Command-Line Interface，翻译为命令行界面，但是俗称脚手架
  • Vue CLI是一个官方发布vue.js项目脚手架
  • 使用vue-cli可以快速搭建vue开发环境以及对应的webpack配置

前提

• 安装node.js
  • 可以直接在官方网站中下载
  • 网址: http://nodejs.cn/download/
• 检测安装的版本
  • node -v npm -v
  • node环境要求8.9以上或者更高版本
• 什么是NPM呢
  • NPM的全称是Node Package Manger
  • 是一个nodejs包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准
  • 后续我们会经常使用NPM来安装一些开发过程中依赖包

安装

Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

npm install -g @vue/cli

注意：安装的是vue cli3版本

拉取2.x版本

Vue CLI3和旧版本使用了相同vue命令，所以Vue CLi2(Vue-cli)被覆盖了，如果你仍然需要使用旧版本vue init功能，你可以全局安装一个桥接工具:

vue init webpack my-project

创建2.0版本详解

• vue init webpack myvuejsproject:myvuejsproject会根据这个名称创建一个文件夹，存放之后项目的内容，该名称也会作为默认的项目名称，但是不能包含大写字母等
• Project name: 项目名称，不能包含大写
• Project description:项目描述
• Author:作者的信息，会默认从git中读取信息
• Vue build runtime:
• Install vue-router:
• Use ESlint to lint your code: 代码规范
• Set up unit test： 单元测试
• Setup e2e test with Nightwatch:端到端测试

.gitconfig配置文件路径：c:\users\adminstrator.gitconfig

• .gitconfig git上传时的配置
• .editorconfig 编辑配置，有字符集 间隔
• .eslintignore 规范忽略配置

创建3.0版本详解

rc结尾是终端配置文件
.git文件是git版本控制

指令：

	npm create 工程名

创建详解

• please pick a preset（设置）：Manually select feature(特征)
• 空格键选择/反选
• Progressive Web App 让网页渐进式地成为App，使网页可以如同应用程序一般添加快速打开方式，并且不用通过app store
• in dedicate config file 放在独立的文件
• in package.json 放在package.json文件
• save this as preset for furture projects 要不要把刚才自己选择的配置保存下来
• public：相当于static文件，存储的是一些不变的文件
• package.json中@vue/cli-service ： 管理工具
• .browserslistrc： 浏览器相关支持情况
• .gitignore： git忽略的文件
• babel.config.js： ES语法转换
• postcss.config.js : CS相关转换

查看vue确定的版本

beta版本很不稳定
vue的版本和vue-template-compiler，就像是一对密码和密钥一样，是一一对应的

UI方面的配置
启动配置服务器：vue ui
输入指令：vue ui

隐藏的配置文件路径
/node_modules/@vue/cli-service/webpack.config.js

箭头函数

总结：箭头函数中的this引用的就是最近作用域的this
问题：箭头函数中的this是如何查找的
答案：向外层作用域中，一层层查找this，直到找到this的定义

const obj ={
    aaa(){
        setTimeout(function(){
            console.log(this);//函数调用默认是windows
        });
        setTimeout(()=>{
            console.log(this);//obj对象
        })
    }
}

call()和apply()

• 区别：call(obj, para1,para2…), apply(obj, [para1,para2,para3])
• 这两个函数都是函数对象的方法，需要通过函数对象调用
• 在调用call和apply可以指定一个对象未第一个参数，此时这个参数将会成为函数执行时的this

this的情况

• 以函数形式的调用时fun(),this永远是window
• 以方法的形式调用时obj.fun()，this是调用方法的对象
• 以构造函数调用时ClassName(), this是新创建的那个对象
• 使用call和apply时fun.apply()，this是指定的那个对象

vue x

• vue x是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享
• 一般情况下，只有组件之间共享数据，才有必要存储到vuex中，对于组件中的私有数据，依旧存储在组件自身的data中即可。

runtime-only and runtime-compiler

//runtime-only
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

//runtime-compiler
new Vue({
	el:'app',
	render:h=>h(App)
})

//3.0
new Vue({
render:function(h){

}
})

vue运行过程:

• 将template传入到options
• parse 转成ast（abstract syntax code,抽象语法树）
• ast compile to render
• render to virtual dom
• virtual to ui

runtime-only直接从render开始，所以性能更高，代码量更少。
runtime-compiler从tempalte开始

runtime-compiler

new Vue({
	el:'#app',
	render:function(crateElement){
	//1 普通语法：createElement('标签'，{标签的属性}, [''])
	//return createElement('h2',{class:'box'},['hello world',createElement('button',['按钮'])])
		//return createElement(cpn)
	//}
	//2 传入对象
	return createElement(cpn)

})

总结

• 如果在之后的开发中，你依然使用tempalte，就需要选择Runtime-compiler
• 如果在之后的开发中，使用的.vue文件夹开发，那么可以选择Runtime-only

-如果你需要在客户端编译模板（例如，向template选项中传入字符串），你需要带有编译器的版本

• 在使用vue-loader或vueify时，*.vue文件中的模板会在构建时（build time）预编译（pre-compiler）为javascript，最终生成的bundle中你不再需要编译器（compiler），因此可以直接使用只含有运行时的构建版本（runtime-only）
• 由于只含有运行时构建版本（runtime-only）比完整构建版本（full-build）轻大约30%，你应该尽可能使用只含有运行时的构建版本，如果你还是希望使用完整构建版本，则需要在打包器中配置别名
• 由于运行时版本的构建比其全版本的代码量轻30%，因此你可以随时使用它，如果你仍然希望使用完整版本，则需要在捆绑程序中配置别名
  问题：

1. vue-cli Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 13.250.177.223:443
   下载地址：https://github.com/vuejs-templates/webpack
   下载之后，解压到本地用户目录下的.vue-templates/webpack目录下。
   然后正常创建项目

		Vue init webpack 项目名  --offline

2. 安装cli不了
   如果执行指令还是不行，可以手动删除C:\Users\yun.liu\AppData\Roaming\npm-cache下的文件

		npm clean cache -force