前端框架Vue自学之Vue CLI(五)

摘要:
如果了解webpack如何一步步配置的,建议可以先看我的前一个博客:前端框架Vue自学之webpack(四)。当然不同的技术的技术栈会有自己的目录结构、工作流程,例如我们前端框架比如vue、angular、react会有自己的脚手架。由于webpack是依赖于node环境,所以VueCLI也是依赖node环境。在使用VueCLI前,需要安装NodeJS,Node环境要求8.9以上。这个是一个脚手架VueCLI3(可能2019年年底的版本已经到4.1.1,不过也没关系。由于我们先学习一下VueCLI2。

终极目标:掌握和使用Vue(全家桶:Core+Vue-router+Vuex)

本博客目的:记录Vue学习的进度和心得(Vue CLI)

内容:学习和使用Vue CLI2 和 Vue CLI3。如果了解webpack如何一步步配置的,建议可以先看我的前一个博客:前端框架Vue自学之webpack(四)

正文:

Vue CLI

一、Vue CLI

1、前言

前面(上一个博客)中,学习webpack的相关知识,知道webpack的一些配置,最后知道如何把生产配置和开发配置进行分离。

如果只是写几个vue的demo,则是不需要vue CLI的。在实际开发(大型项目)中,我们一般不会重头到尾写webpack的配置,我们会通过一个工具,叫脚手架,自动生成我们weback的配置,提升我们的工作效率。

CLI(command-line interface,命令行界面,俗称脚手架(软件工程学引用这个建筑学概念)),其含义很简单。举个例子,当我们要写一个项目1,用了ES6的JavaScript,LESS的CSS扩展语音,后端使用node。我们每次写完一个功能,都需要把ES6转为ES5,编译LESS,压缩JS等操作。每次修改代码都要做的这些操作属于重复性工作。后来,我们学习了webpack或者是gulp,写了webpack脚本(webpack配置),每次有代码改动,只需在终端输入webpack等就可以自动完成上述的重复性工作,我们写的webpack脚本就是为了减少重复性工作。但是,我们写完这个项目1还得写项目2,项目3等,我们每次都用相同的技术栈,每次的webpack脚本都大同小异,这个时候,写这么多的webpack脚本,也是一种减少重复性工作的重复性工作

而脚手架就是可以帮我们解决这个问题的工具。脚手架一个命令,目录结构、webpack脚本、babel配置、空的测试文件都帮我们搞好了. 直接写核心业务代码,不做重复性工作,这就是脚手架的作用。当然不同的技术的技术栈会有自己的目录结构、工作流程,例如我们前端框架比如vue、angular、react会有自己的脚手架(XXX-CLI)。现在我们就来学习一下vue CLI。

2、vue cli及使用前提

在使用vue.js开发大型应用时,我们需要考虑代码目录结构,项目结构和部署、热加载、代码单元测试等事情。如果每个项目都要手动完成这些工作,那无疑效率比较低的,所以通常我们会使用一些脚手架工具(Vue CLI)来帮助我们完成这些事情。

Vue CLI是一个官方发布vue.js项目脚手架,使用vue-cli可以快速搭建Vue开发环境以及对于的webpack配置。

由于webpack是依赖于node环境,所以Vue CLI也是依赖node环境。在使用Vue CLI前,需要安装NodeJS(可在Node官网下载安装),Node环境要求8.9以上。Node安装好了之后,是自带软件包管理工具npm,npm是一个NodeJS包管理和分发工具,以及成为了非官方的发布Node模块的标准。后续我们会经常使用npm来安装一些开发过程中依赖包。 

Vue.js官网脚手架工具就使用了webpack模板,对所有的资源会压缩等优化操作,它在开发过程中提供了一套完整的功能,能够使得我们开发过程中变得高效。webpack的全局安装,是通过在终端输入npm install webapck -g。

3、Vue CLI的使用

首先安装Vue CLI脚手架。在终端输入 npm install -g @vue/cli ,它是全局安装(一般不需要本地安装)。这个是一个脚手架Vue CLI3(可能2019年年底的版本已经到4.1.1,不过也没关系。因为我学的时候用的是3.2.1版本,所以也可以指定版本npm install -g @vue/cli@3.2.1),我们先学脚手架2,安装3版本也没事,因为我们可以在脚手架3的基础上拉取一个脚手架2的模板使用即可当做脚手架2。

注意,如果安装的太慢,可以借助将npm的仓库地址改为淘宝镜像(输入npm config set registryhttps://registry.npm.taobao.org--global 和 npm config set disturlhttps://npm.taobao.org/dist--global),之后再安装(速度飞起)。然后可以通过vue --version查看自己安装的版本。

由于我们先学习一下Vue CLI2。现在,我们得拉取Vue CLI2的模板。终端输入npm install -g @vue/cli-init(# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同)。这个时候我们既可以使用Vue CLI3,也可以使用Vue CLI2了。

Vue CLI2初始化项目,在对应的目录下,终端输入 vue init webpack my-project(my-project是项目名称)即可,接着可能会有很多选项,我们在下一小节具体详细说明。

补充:Vue CLI3初始化项目是通过vue create my-project(后续会使用到的)。

4、vue-cli2初始化项目过程

首先cd到某个目录,然后终端输入vue init webpack vuecli2test(最终会创建名为vuecli2test,在里面初始化项目目录和文件),此时会下载一些模板(download template),之后会有一些选项给我们选择,具体有:(这些项目信息最终会保存在package.json里面)

project name (vuecli2test),输入项目名称,如果直接回车会默认是一原来项目文件夹名vuecli2test为项目名,但不能包含大写字母等。即括号里面的内容是默认信息,如果直接回车会自动填充。

project description(A Vue.js project),描述信息,这里我们填写为 test vue cli2

Author,作者名。如果我们之前有配置全局的.gitconfig,这里也会有默认的作者信息。

Vue build(Use arrow key),它是提示我们编译模式是选择runtime-only还是runtime-compiler,因为之前(上个博客)说过,runtime-only要求代码中,不可以有任何的template,因为这个版本没有编译template的代码,但是其大小很小(少6kb),运行效率高。runtime-compiler中可以有template,因为有complier可以用于编译template。这里我们先不管编译template的问题,先选runtime-compiler,后续我们会继续分析两者的。

Install vue-router,是否安装vue路由。在大型项目中,我们通常都会使用vue的全家桶,即VueCore+vue-router+vuex(vue内核+vue路由+vue状态管理工具)。如果我们选择安装,则后续可以直接使用这个路由,因为脚手架已经帮我们安装好了。这里,我们先不安装。

Use ESLint to lint your code,是否使用ESLint。 ESLint对JS进行规范检查,如果我们写的JS代码不规范就会编译不通过。如果选择使用,会出现pick an ESLint preset,要你选择一种规范(Standard,Airbnb,自定义规范)。这里我们选先不使用。如果不小心使用了,也可以在config的index.js文件中的UseEslint改为false即可。

Set up unit tests,设置单元测试。如果安装单元测试,可能还得需要一些第三方的测试框架。单元测试会提供很多断言,来对我们某些模块进行单独的测试。这里我们先选不设置。

Setup e2e tests with Nightwatch,设置端到端(end to end)测试并安装Nightwatch。Nightwatch是一个利用selenium或webdriver或phantomjs等进行自动化测试的框架。一般是测试人员会使用到这个东西。我们这里先选no。

Should we run `npm install` for you after the project has been created(npm,yarn,自己管理),选择管理工具。我们这里选npm。

选择完之后,会自动根据我们的选择进行项目初始化。初始化完成之后,就生成了我们的项目目录。

前端框架Vue自学之Vue CLI(五)第1张

5、Vue CLI2的目录结构解析

上一小节中,我们用Vue CLI2初始化了我们的项目,这里生成了多目录,形成了一个目录结构,我们来一个一个了解一下。

首先,项目里面有build文件夹config文件夹。里面都是webpack打包和配置的文件。在面对这么多的文件的时候,我们不要一个一个看,先打开我们的package.json,看scripts脚本(就是在终端通过npm run XXX执行的对应脚本),里面有我们dev,start,build。其中,"build":"nodebuild/build.js"(node是可以执行js文件的,这里执行的是build文件夹的build.js),我们可以打开build文件夹的build.js,观察细节。build.js文件大致思路是,首先引入各种包,每次执行npm run build时,先把之前打包创建的dist删除(remove),然后根据./webpack.prod.conf的webpack配置进行打包。./webpack.prod.conf这个文件是生成版本的webpack配置,查看源码,发现之前跟我们之前讲的webpack配置文件分离(在我之前的博客),把基本公共配置与生产独有的配置进行合并。基本公共配置里有很多webpack的插件,例如抽离组件的CSS等。而开发webpack配置,运行的是build文件夹内webpack.dev.conf.js,也是把基本公共配置与开发调试的配置合并而成的。config文件夹内的文件也是配置文件,定义一些全局变量,端口号等和一些开发配置和生产配置。(可见,如果我们一个一个配置这些文件非常繁琐,而使用脚手架就大大帮助了我们,某些配置不满意,我们也可以自己去修改它,非常方便

补充:node是用C++开发的,其核心是Chrome V8引擎(使得JS直接生成二进制码再到浏览器运行,之前是生成字节码,运行速度没前者快),为我们的JS提供运行环境。以前的JS运行查看结果,是得通过将其引入到HTML文件中,通过浏览器打开这个HTML文件,查看JS一些结果。后面有人想用JS开发服务器,但是因为服务器没有浏览器,困难重重,之后Ryan Dahl基于Chrome V8引擎开发node。node能够使用V8引擎解析JS做服务器的底层支撑,所以只要装了node,就可以通过node在我们电脑执行我们的JS代码。

node_modules文件夹,这个是我们当前项目很多依赖的包。具体有什么的呢?我们可以通过package.json的devDependences和dependencies选项来看,devDependences(开发依赖)里面有很多依赖,而dependencies(运行依赖)只有一个vue。  

src文件夹。里面放开发源码。我们写的代码都在里面。

static文件夹。里面放入静态资源。这个静态资源最后打包的时候,会原封不动的打包到dist文件夹内。

.babelrc文件。ES6转为ES5的一些相关配置。

.editorconfig文件。对我们写的代码格式进行统一,例如缩进,换号等。在大公司里,一般项目代码编写格式都是有要求的。

.gitignore文件。当你上传一些文件的时候,规定一些不用上传的文件。

.postcssrc.js文件。CSS进行转换的时候一些配置的东西。

index.html文件。一个HTML模板,最后打包的时候是根据这个HTML文件,创建打包文件到build目录下的dist文件夹内。

package.json文件。管理node包里面相关的东西,还有一些信息管理。

package-lock.json文件。因为有时候node安装一些包的版本可能是在package.json规定以上的版本,package-lock.json文件是真实记录实际安装在node_modules的版本。

README.md文件。一些说明文档。

6、runtimecompiler和runtimeonly的对比

其区别只在main.js里面。

(图左是runtimecompiler,图右是runtimeonly)前端框架Vue自学之Vue CLI(五)第2张

runtimecompiler中,使用APP是现在components注册,然后在template中使用这个组件作为模板。结合vue程序运行过程,当使用template时,其会先保存在vue实例的options里面,然后parse(解析)为ast(abstract syntax tree,抽象语法树,是用编程语言编写的源代码的抽象语法结构的树表示。树的每个节点表示在源代码中出现的构造。),然后其会complier编译成render渲染函数,接着会渲染一些虚拟节点,最后构成为虚拟DOM树(virtual DOM),最后更新,构造真实的DOM(真实的UI)。所以在untimecompiler中,是template -> ast -> render -> vdom -> UI。

runtimeonly中,使用APP是通过render渲染函数(并用ES6的箭头函数语法),h函数是vue用于把vdom转换为dom节点。结合vue程序运行过程,其是render -> vdom -> UI。其步骤比runtimecompiler少,即代码少,性能更高。这也是为什么之前在脚手架构建项目的时候,说runtimeonly比runtimecompiler更小的原因。所以,以后我们的开发,一般选择runtimeonly

(vue程序运行过程如下图所示:)前端框架Vue自学之Vue CLI(五)第3张

render函数是可以用在原来写的runtimecompiler的main.js里面,之前的runtimecompiler的template模板就是替换其el挂载的HTML元素,而render函数可以代替template,用createElement函数,生成对应标签,标签的属性,数组(放置标签内的内容,甚至可以是createElement函数)(接着替换其el挂载的HTML元素)。render函数可以使用组件(代替之前template和components的组合用法),就是把组件传入createElement里面。(上述这样做相当于没了template转ast,再转为render的步骤,其实就是runtimeonly的main.js的写法)

但是我们会有所疑惑,在runtimeonly的main.js中,render函数里引用的组件(如APP)是从vue文件引用的,而vue文件里面不是也有template标签吗?所以是不是得先解析为ast,再编译为render呢?其实不是的。vue文件中的template最终会编译为一个普通的对象,已经渲染为render函数了(内部是通过webpack配置安装好的vue-template-compiler loader解析编译的,所以我们一般使用runtime-only也是包含这个loader的,很方便)。

(npm run build的内部逻辑图)

前端框架Vue自学之Vue CLI(五)第4张

(npm run dev的内部逻辑图)

前端框架Vue自学之Vue CLI(五)第5张  7、Vue CLI3创建项目和目录结构

vue-cli3 与2版本有很大区别。vue-cli3是基于webpack4打造,vue-cli2还是webpack3;vue-cli3的设计原则是“0配置”,移除的配置文件根目录下的build和config等目录;vue-cli3提供了vue ui 命令,提供了可视化配置,更加人性化;移除了static文件夹,新增了public文件夹(相当于static,里面的文件也是原封不动的会打包到dist文件夹内),并且index.html移动到public中。

Vue CLI3创建项目,终端输入 vue create testvuecli3 (是项目名称),会出现一些选项:

please pick a preset(default,Manually select features),选择预配置。我们选第二个手动选择。

check the features needed for your project,选择我们项目需要的选项。这一步出现了很多项,我们可以按空格去选择。这里我们只需要Babel。(PWA,渐进式增强WEB应用。有一些缓存、推送和通知等功能,很灵活,但目前国内用的比较少)

前端框架Vue自学之Vue CLI(五)第6张

Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (In dedicated config files, in package.json)这是让我们选择这些配置文件放在独立的文件还是packa.json里面。这里,我们选择单独文件。 

Save this as a preset for future projects,保存当前的预配置。选择yes。

save preset as,配置名字。随便输入,这里我输入wu。

此时完成了项目创建和预配置。注意,当我们第一次创建好项目,在以后创建项目时,会出现我们之前创建过的预配置供我们选择。例如我刚刚创建的预配置是wu,这里新项目的配置也有这个预配置。当选择这个wu预配置,项目就可以自动按照配置创建工程了。(如果我们日后想删除这个配置,可以在终端输入vue config 找到这个预配置文件,将其删除)

前端框架Vue自学之Vue CLI(五)第7张

如果安装的git,用vuecli3创建工程时,会有.git文件夹(本地仓库),当在终端输入git相关命令,可以进行git操作。

此时,目录有了一些改变(相对于vue cli2),看上去更加简洁了,但主要文件的功能和脚手架2差不多。

前端框架Vue自学之Vue CLI(五)第8张

查看package.json的scripts选项,里面开发测试时用npm run serve,打包是npm run build。

前端框架Vue自学之Vue CLI(五)第9张

此外,在入口文件main.js中,Vue.config.productionTip 的意思是在发布一个产品,在构建的时候给我们提示一些信息。在开发调试时是不需要的,所以让Vue.config.productionTip=false。main.js中,是通过.$mount('#app')取代el:'#app',来挂载id为app的HTML元素,其实没有差别,最终其都会被render函数渲染替换掉。

8、Vue CLI3配置文件的查看与修改

在vue CLI3查看配置有三种方案:

第一种,启动配置(本地)服务器:vue ui(终端输入)。之后会启动GUI(图形用户界面)和打开一个浏览器窗口,里面可以创建项目,导入项目等。    

前端框架Vue自学之Vue CLI(五)第10张

当选择导入我们刚用vue CLi3创建的项目文件夹时,左边会出现项目仪表盘,插件,依赖,配置,任务等选项,点开我们可以看到很多细节信息并且可以添加插件,安装依赖等。其中,在项目配置中,可以发现启动运行时编译选项是关的,即默认选择的时候runtime-only,在main.js中的代码也证实了这一点(因为没有使用template)。

前端框架Vue自学之Vue CLI(五)第11张

第二种,查看node_modules文件夹。由于在package.json中发现,一些webpack依赖,在Vue CLI3中是通过@vue/cli-service和@vue/cli-plugin-babel这两项来封装管理的。所以,我们可以打开node_modules文件夹的@vue文件夹中的cli-service文件夹的webpack.config.js,发现其是引用./lib/Service的js文件,这就是真正的配置的webpack文件(Service.js也有引入其他公共配置,开发配置等)。

第三种,创建vue.config.js文件(根目录下)。当我们需要修改某些配置的时候,需要在根目录下创建vue.config.js文件(名字不能换),文件里面通过module.exports={XXX}导出一些配置。其最后会和之前说的@vue中的一些配置进行合并。

免责声明:文章转载自《前端框架Vue自学之Vue CLI(五)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇javascript之数据推送C# 解析获取到JSON下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

vue 服务端渲染 vs 预渲染(1)

服务端渲染: 1、将完整的html输出到客户端 2、要使用通用代码 优点 :  1、首次渲染快(无需等所有的js都完成下载)   2、利于seo 缺点:  1、更多的服务器负载 2、开发受限 3、需要处于node.js/php server 运行环境 预渲染:  1、使用少数营销页的seo   2、生成对特定路由静态的html文件 优点:   1、预渲染更...

scp 将数据从一台linux服务器复制到另一台linux服务器

原文地址:http://www.cnblogs.com/peida/archive/2013/03/15/2960802.html  完整内容参考原文! scp 是secure copy的简写,用于在Linux下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器,而且 scp传输是加密的。可能会稍微影响一下速度。当你服务器...

VSFTP配置参考

仅供参考。不同的版本配置可能不同。 vsftpd推荐配置: 关于用户: userlist_enable=YES userlist_deny=NO userlist_file=/etc/vsftpd.user_list echo "需要使用ftp的用户" > /etc/vsftpd.user_list,其余用户不可以访问 关于切换目录: chroot_...

arm-linux的gdb移植

转载于:http://blog.chinaunix.net/uid-23381466-id-309369.html arm-linux的gdb移植分为两种情况.一种是交叉调试版。这一种模式是需要编译一个arm-linux版本gdbserver (GDB的stub模块).然后再编译一个X86版本交叉调试的gdb.为了与桌面版本身的gdb 区别开来,一般改名为...

循序渐进Linux 2:Linux的常用命令及使用技巧

一、Shell   shell本身是一个以C语言编写的程序,是用户和操作系统内核之间通信的桥梁。shell既是一种命令解释程序,又是一种功能强大的解释型程序设计语言。shell解释用户输入的命令,提交到内核处理,最后返回结果给用户。 1. shell命令语法分析 command [option] -[arguments] 2. shell的通配符 bash...

NSFileManager和NSFileHandle(附:获取文件大小 )

本文转载至:http://www.cnblogs.com/pengyingh/articles/2350345.html 天牛 感谢原创作者的硕果 //file 文件操作 NSFileManager  常见的NSFileManager文件的方法: -(BOOL)contentsAtPath:path                从文件中读取数据 -(B...