前端开发3年了,竟然不知道什么是 Vue 脚手架?(上)
一、脚手架认识和使用前提
CLI 是什么意思?
CLI -- Command-Line Interface 命令行界面,俗称脚手架。
脚手架就是一个大概的框架,是建筑学上的一个概念。
1.1、什么是Vue-cli?
Vue-cli 是官方发布 vue.js 项目脚手架,使用 Vue-cli 可以快速搭建 vue 开发环境,以及对应的 webpack 配置。
1.2、使用脚手架的前提有哪些?
1、安装 node.js,同时安装 npm。
npm(Node Package Manager),是 Node.js 包管理和分发工具,已成为非官方的发布 Node 包标准,现在经常使用 npm 进行安装一些开发过程中依赖包。
由于国内使用 npm 官方镜像非常慢,推荐使用淘宝镜像,淘宝定制的 cnpm 代替 npm。使用
npm install -g cnpm --registry = https://registry.npm.taobao.org
安装完成之后就可以使用 cnpm 了。
cnpm 与 npm 使用命令是一样的,只是在执行命令时将 npm 改为 cnpm。
2、安装 webpack
对所有的资源都会压缩等优化操作,在开发过程中,提供了一套完整的功能,能够使开发效率更高。
使用命令进行安装
npm install webpack -g //全局安装 npm install webpack --save //当前目录安装
3、安装脚手架
npm install @vue-cli -g //全局安装
安装完成之后,输入 vue 回车,就能看到 vue 中的命令行,如图:
官网文档介绍 vue-cli 安装时,可以使用的命令有两种:
yarn 工具,类似 npm 的基本使用,在性能上比 npm 更好。相同意义命令可能不同。
二、Vue CLI 2.x 初始化项目
vue-cli 3 已经发布一段时间了,现在安装脚手架,都会安装 Vue-cli 3.x 版本,如果我们想要使用 vue-cli 2.x 版本时,需要拉去 vue-cli 2.x 的模板,使用命令如下:
npm intstall -g @vue/cli-init
此时,就可以开始使用 vue-cli 2 创建项目了。
1、创建项目文件夹 vue-cli 2
2、在文件夹内打开 cmd 窗口,输入命令:
vue init webpack learn
此时已经开始下载模板。
根据提示信息,输入对应的信息内容,如图:
vue 项目打包的时候,Runtime+compiler 与 Runtime-only 是有区别的,第一个解释,该命令适用大多数用户,所以我们先选择第一个,后边讲解区别。
回车继续创建项目:
提示是否使用 vue-router(路由)、Eslint(代码规范化检测工具),最后提示我们选择使用什么命令进行项目管理,最后一个是手动处理,我们选择大家熟悉的 npm 就好了。
现在等着项目创建完成之后,会提示我们进入项目,然后使用命令运行环境。
三、Vue-cli 2.x 项目结构解析
首先从 配置文件 webpack.json 文件入手:寻找 scripts ,scripts 中存放的都是一些项目运行、打包、测试等脚本。代码如下:
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
}
3.1、为什么使用 npm run dev 启动服务?
webpack-dev-server 是启动一个webpack本地服务。
--inline 运行本地命令
--progress 进度
--config build/webpack.dev.conf.js 配置执行脚本入口文件
所以我们执行 npm run dev 的时候,其实执行的是:
webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
启动一个本地服务。启动服务的时候,展示项目进度。如果把 --progress 去掉之后,启动服务的时候就不会显示进度了。
3.2、项目运行后,为啥端口号是8080
找到 config 文件夹内的 index.js 文件,查找 dev中的配置项,就是专门为 npm run dev 执行时的配置项。
dev: {
//编译输出的二级目录
assetsSubDirectory: 'static', //编译发布的根目录,可配置为资源服务器或cdn域名
assetsPublicPath: '/', //使用 proxyTable代理的接口
proxyTable: {}, // 开发时候的访问域名,可通过环境变量自己设置
host: 'localhost', //开发时候的端口号,如果被占用会随机分配
port: 8080, //浏览器是否自动打开项目
autoOpenBrowser: false, //是否使用eslint loader检查代码
useEslint: true, //在浏览器展示错误蒙层
errorOverlay: true, // 是否展示错误
notifyOnErrors: true, poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
devtool: 'cheap-module-eval-source-map',
cacheBusting: true,
cssSourceMap: true
}
3.3、为何使用 npm run build 能够自动打包项目?
npm run build 运行时,其实执行的是: "node build/build.js"。
我们之前开发的网页,执行 js 文件的时候,必须引入 某个 html 文件内,浏览器访问 html 文件,渲染的时候才会执行js文件。
在node中:node 为 js 执行提供了环境,node 是 C++ 开发的 V8引擎,可以直接把 js 文件运行成二进制代码,所以运行起来很快。node 中执行 js 的时候,直接使用:node xx.js 文件就可以运行了。
所以打包项目的时候,执行的是 build 文件夹内的 build.js 文件。
四、项目其他文件介绍
整体的项目目录结构很简单,如图所示:
- build - 存放执行脚本入口
- config - 文件夹内的 index.js ,更多的dev、build配置
- node_moudles - 存放依赖包资源
- src - 存放开发资源
- static - 存放静态资源
- .babelrc - 对 ES6转ES5的限制
- editorconfig - 编辑器配置
- .gitignore - 提交 git 时忽略内容
- index.html - 单页面应用的主入口
- package-lock.json - 记录依赖包的真实版本
- README.md - 使用文档
五、Runtime+compiler 与 Runtime-only 区别
我们再新建一个 runtime-only 的项目,发现两个项目只有 main.js 中有区别。两个 main.js 对比如下图:
要问 template 与 render 的区别,这就需要了解 vue 程序的运行过程:
- template 经过解析(parse) 成 语法抽象树(abstract system tree)
- 再通过 render 函数进行渲染操作虚拟 DOM (Virtual dom)
- 然后虚拟 DOM 操作全部完成之后生成真实 DOM
通过 vue 运行过程,我们不难发现,使用 template 时,多了第一步操作,使用 render 时直接进行第二步。
Runtime+compiler 与 Runtime-only 相比,runtime-only 性能更高,写的代码量更少。命令行中已经提示我们,能够压缩 6kb 的代码。
render 到底是什么呢?
render 函数实质就是生成 template 模板,通过调用一个方法生成,而这个方法又是通过 render 的参数来传递的。
用法1:普通用法
传递的 createrElement 方法有三个参数,分别提供:标签名、标签属性、标签内容
render:function(createElement){
return createElement('h2',{class:'box'},['内容'])
}
通过上述方法,就可以生成一个完整的模板。
用法2:组件用法
传入的是一个组件对象
import App from './App'
render:function(createElement){
return createElement(App)
}
我们实际 main.js 中,其实是对上边的简写,改写成箭头函数。
render: h => h(App)
好了小编今天的文章就到此结束了,喜欢我的可以点个关注哦!
下篇文章 -- 介绍 vue-cli 3.x 搭建项目
前端开发3年了,竟然不知道什么是 Vue 脚手架?(上)的更多相关文章
- 前端开发3年了,竟然不知道什么是 Vue 脚手架?(下)
上一篇文章<前端开发3年了,竟然不知道什么是 Vue 脚手架?(上)>介绍了什么是脚手架,以及Vue-cli 2.x如何创建项目,创建的项目结构.这篇文章介绍 Vue-cli 3.x 如何 ...
- Visual Studio 2015初体验——前端开发工作的问题
前言 因为后台项目开发适用的VS2015,为了跟后台开发配合,前端部门也统一从VS2013升级到了VS2015. 因为C盘空间不足要先卸载,这里就不说卸载2013时花了多长时间,只说安装2015时用了 ...
- web前端开发与iOS终端开发的异同[转]
* {-webkit-tap-highlight-color: rgba(0,0,0,0);}html {-webkit-text-size-adjust: none;}body {font-fami ...
- Web前端开发与iOS终端开发的异同
语言 前端和终端作为面向用户端的程序,有个共同特点:需要依赖用户机器的运行环境,所以开发语言基本上是没有选择的,不像后台想用什么就用什么,iOS只能用Objective-C,前端只能javascrip ...
- 前端开发css禁止选中文本
在我们日常的Java web前端开发的过程中呢,程序员们会遇到各种各样的要求,所以不每天学的东西感觉自己都退步了,都更不上时代的发展了. 每天应对各种需求,每天活在疑问中就是我们程序员的真是写照.但我 ...
- 前端开发 vue,angular,react框架对比2
在过去一年里,前端开发发展迅速,前端工程师的薪资亦是水涨船高.2019 更是热度不减,而作为近年来尤为热门的前端框架,Vue.js 自是积累了大量关注.那么,Vue.js 是适合你的框架吗? ...
- 前端开发个人小结 · Retrospection的博客
序 2018年转眼来到了最后一个月,算下来我进入前端之门也有一年了,虽然下半年由于忙于筹备毕业论文的相关事项,前端这一块有所放下,但是想想还是给自己这一年的学习做一个总结. 现代化软件开发确实是一个复 ...
- Vue.js高效前端开发知识 • 【目录】
持续更新中- 章节 内容 实践练习 Vue.js高效前端开发 • (实践练习) 第1章 Vue.js高效前端开发 • [ 一.初识Vue.js ] 第2章 Vue.js高效前端开发 • [ 二.Vue ...
- 听说你在从事前端开发?那这10个JavaScript的优化问题你不得不知道!
JavaScript的高效优化一直都是我们前端开发中非常重要的工作,也是很多开发人员无法做好的一部分内容,今天我总结了10个优化问题,大家可以参考来做优化,这其中很多问题都是大家经常遇到的哦. ==和 ...
随机推荐
- 七:使用Session进行会话管理
一.Session简单介绍 在WEB开发中,服务器可以为每个用户浏览器创建一个会话对象(session对象),注意:一个浏览器独占一个session对象(默认情况下).因此,在需要保存用户数据时,服务 ...
- SpringBoot的快速入门
快速创建一个SpringBoot项目(两种方式:STS版本,IntelliJ IDEA) 1.STS方式:什么是STS?是Spring团队推荐使用的开发工具 所谓的sts就是eclipse升级版 继承 ...
- JS方式实现隐藏手机号码中间4位数
1.截取 function test (value) { const start = value.slice(0, 3) const end = value.slice(-4) return `${s ...
- kubebuilder实战之八:知识点小记
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...
- SpringMVC笔记(1)
一.SpringMVC简介 1.1 MVC模型 MVC模型 MVC全名是Model View Controller,是模型(model)- 视图(view)- 控制器(controller)的缩写,是 ...
- JS 之 每日一题 之 算法 ( 划分字母区间 )
题目详解: 字符串 S 由小写字母组成.我们要把这个字符串划分为尽可能多的片段,同一个字母只会出现在其中的一个片段.返回一个表示每个字符串片段的长度的列表. 例子: 示例 1: 输入:S = &quo ...
- vue element-ui el-date-picker 数据可以更改,但是前端不显示的更改后的数据问题
template: <el-form-item label="有效时间:" prop="validTime"> ...
- 1.3w字,一文详解死锁!
死锁(Dead Lock)指的是两个或两个以上的运算单元(进程.线程或协程),都在等待对方停止执行,以取得系统资源,但是没有一方提前退出,就称为死锁. 1.死锁演示 死锁的形成分为两个方面,一个是使用 ...
- python3 爬虫五大模块之三:网页下载器
Python的爬虫框架主要可以分为以下五个部分: 爬虫调度器:用于各个模块之间的通信,可以理解为爬虫的入口与核心(main函数),爬虫的执行策略在此模块进行定义: URL管理器:负责URL的管理,包括 ...
- windows系统框架