-
- 脚手架VueCli
-
- 一、什么是CLI
- 二、VueCLI所需要的环境
- 三、安装Vue脚手架
- 四、使用`CLI2`创建项目
- 五、项目目录结构描述
- 六、了解runtime-only和runtime-complier的区别
- 七、了解CLI3
CLI:Command-Line Interface(命令行界面),俗称脚手架。 VueCLI可以帮助我们快速开发Vue开发环境以及对应的webpack配置。
二、VueCLI所需要的环境运行VueCLI需要电脑中已经安装好了NodeJS和NPM命令。
NPM:Node Package Manager(NodeJS包管理工具)
在搭建脚手架之前,我们需要先把webpack的基础结构给安装好。
命令:npm install webpack -g
三、安装Vue脚手架命令:npm install @vue/cli -g
如果出现文件无法被替换删除的情况,先使用命令:npm cache clean --force; 然后再使用指令:npm install @vue/cli -g --force
上述命令安装的应该是CLI的4的版本,4的版本基本上与3的功能一致。 如果我们需要使用旧版的vue init功能,可以安装一个全局的桥接工具。
命令:npm install @vue/cli-init -g
CLI 2创建webpack项目:
vue init webpack myPorject(myPorject这个是项目名)
CLI3创建webpack项目:
vue create myProject
四、使用CLI2创建项目使用命令后,在真正创建项目之前,有些选项需要我们进行一些设置,具体如下:
- Project name (my-project):(项目名不能使用大写)这个是项目名称,默认是输入时的那个名称,想改的话直接输入修改,也可以直接回车
- Project description (A Vue.js project):项目描述,也可直接点击回车,使用默认名字
- Author (xxx):作者,输入你的大名
- vue build (Use arrow keys):选择默认的就成Runtime + Compiler: recommended for most users
- install vue-router:是否安装vue-router,这是官方的路由,大多数情况下都使用,这里就输入“y” 或者直接回车即可。
- Use ESLint to lint your code?是否使用ESLint?(ESlint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。) 默认使用,这样会生成相关的ESLint配置。
- Pick an ESLint preset Standard:接下来也是选择题Pick an ESLint preset (Use arrow keys) 选择一个ESLint预设,编写vue项目时的代码风格,直接y回车
- Setup unit tests?(是否安装单元测试)
- Setup e2e tests with Nightwatch:(是否安装E2E测试框架NightWatch(E2E,也就是End To End,就是所谓的“用户真实场景)
- Should we run 'npm install' for you after the project has been created?(项目创建完成之后使用npm命令来进行包管理)是否使用安装依赖的包。
- 全部选择好回车生成项目了
build //构建脚步目录,保存一些webpack的初始化配置 config //构建配置目录,项目初始化的配置,包括端口号等 node_modules //npm加载的项目依赖的模块 src //源码目录,这里是我们要开发的目录,基本上要做的事情都在这个目录里 - assets //资源目录,用来放置图片,如logo等 - components //组件目录,用来放组件文件 - router // 路由配置 - app.vue //是项目入口文件 - main.js //是项目的核心文件 static //文件夹用来放置静态资源目录,如图片、字体等。 test //初始测试目录,可删除 .babelrc babel //编译参数,vue开发需要babel编译 .gitignore //用来过滤一些版本控制的文件,比如node_modules文件夹 index.html //是首页入口文件,你可以添加一些 meta 信息或统计代码啥。 package.json //是项目配置文件,记载着一些命令和依赖还有简要的项目描述信息 README.md //项目的说明文档,markdown 格式,介绍自己这个项目的六、了解runtime-only和runtime-complier的区别
我们使用脚手架初始化两个项目,编译方式分别使用runtime-only(左边)和runtime-complier(右边)。可以发现,他们的main.js的代码有一些区别。
其主要的区别在于在加载组件的使用运用了两种不同的方法。一种是直接注册组件,而另外一种使用render方法进行加载。要了解这两个方式的差异,我们首先要了解两种方式渲染网页的方法。
runtime-compiler:vue的运行过程会将 template --解析–>成抽象语法树(ast)–编译成–> render函数—>虚拟dom树---->渲染成真实dom。 runtime-only:render函数—>虚拟dom—>真实dom。runtime-only跳过了template解析成抽象语法树的步骤,代码量更少,性能更高。
在runtime-compiler中删除components属性和template,增加render函数也可以实现runtime-only一样的效果。
七、了解CLI3CLI3和CLI2的差别还是很巨大的。在CLI3中移除了目录中的Config、Build和static目录,新增了public目录。并且把index.html移动到了public目录之中。并在CLI3增加了一个图形界面,我们可以通过图形界面来控制整个项目。
启动命令:vue ui
了解CLI3中目录结构以及文件的含义后,体验脚手架的图形管理页面即可。