Vue CLI的使用(一)
什么是CLI
在我们日常开发之中,如果只是简单的写几个Vue的Demo程序,就不需要Vue CLI,但是要开发大型项目的时候,就必须要Vue CLI。而且对于大型项目来说,如果采用WebPack的方式就会效率低下,因此我们会采用一些脚手架工具来解决这些事情。
CLI是Command-Line Interface,翻译为命令行界面,俗称交做脚手架,它是由官方发布的Vue.js项目脚手架,可以快速搭建Vue开发环境以及对应的webpack配置/
Vue CLI使用的前提
- 安装NodeJS ,这个可以在官方网站中下载安装,网址为http://nodejs.cn/download/
默认情况下自动安装Node和NPM
注意:Node环境需要8.9以上或者更高的版本
查看版本号
这里简单说一下NPM的全称为Node Package Manager,是一个包管理和分发工具,已成为了非官方的发布Node模块(包) - Webpack的安装
全局安装:npm install webpack -g
Vue CLI的使用
安装Vue脚手架npm install -g @vue/cli
注意:上面所安装的是Vue CLI3版本,如果想要按照Vue CLI2的方式构建项目,需要拉取我们的2版本模板
npm install -g @vue/cli-init
CLI2 项目创建
注意:这是CLI2的项目创建,该名称也会作为默认的项目名称,不能含有大写字母等。
Vue类型Runtime+Compiler和Runtime-only区别
左边的是平常所写的方式,右边为箭头函数,一般vue的步骤为template->ast(抽象语法树)->render(箭头函数)->虚拟DOM->UI,右边省去了我们前面两步,因此会更快
左边的图可以转换成下面所展示的函数,与右边的图是一样的道理
也可传入组件
为什么runtime-only有模板却不会解析失败?
通过vue-template-complie这个来对模板进行解析
标记文本
认识Vue Cli3
CLI3与Cli2的区别
1.Vue-cli3是基于Webpack4,而Vue-cli2是基于Webpack3
2.Vue-cli3的设计原则是“0配置”,移除了根目录下的build,config等目录
3.Vue-cli3提供了Vue ui命令,提供了可视化配置,更加人性化
4.Vue-cli3移除了static目录,新增public文件夹,并且index.html移动到public
VueCli3创建项目
命令:vue create 项目名称
VueCli3的UI界面
命令:vue ui
箭头函数的使用