前端开发3年了，竟然不知道什么是 Vue 脚手架？（上）
<h2 class="pgc-h-arrow-right">一、脚手架认识和使用前提</h2><p data-track="9">CLI 是什么意思？</p>
<p data-track="2">CLI -- Command-Line Interface 命令行界面，俗称脚手架。</p>
<div class="pgc-img"><img alt="前端开发3年了，竟然不知道什么是 Vue 脚手架？（上）" class="syl-page-img lazyload" data-src="https://p3-tt.byteimg.com/origin/pgc-image/e7897f532f184048b2cc8f44de86d1ee?from=pc">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="4">脚手架就是一个大概的框架，是建筑学上的一个概念。</p>
<h3 data-track="5">1.1、什么是Vue-cli?</h3>
<p data-track="6">Vue-cli 是官方发布 vue.js 项目脚手架，使用 Vue-cli 可以快速搭建 vue 开发环境，以及对应的 webpack 配置。</p>
<h3 data-track="7">1.2、使用脚手架的前提有哪些？</h3>
<p data-track="11"><strong>1、安装 node.js，同时安装 npm。</strong></p>
<p data-track="8">npm（Node Package Manager），是 Node.js 包管理和分发工具，已成为非官方的发布 Node 包标准，现在经常使用 npm 进行安装一些开发过程中依赖包。</p>
<p data-track="10">由于国内使用 npm 官方镜像非常慢，推荐使用淘宝镜像，淘宝定制的 cnpm 代替 npm。使用</p>
<div class="cnblogs_code">
<pre>npm install -g cnpm --registry = https:<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">registry.npm.taobao.org</span></pre>
</div>
<p data-track="13">安装完成之后就可以使用 cnpm 了。</p>
<p data-track="20">cnpm 与 npm 使用命令是一样的，只是在执行命令时将 npm 改为 cnpm。</p>
<p data-track="14"><strong>2、安装 webpack</strong></p>
<p data-track="15">对所有的资源都会压缩等优化操作，在开发过程中，提供了一套完整的功能，能够使开发效率更高。</p>
<p data-track="16">使用命令进行安装</p>
<div class="cnblogs_code">
<pre>npm install webpack -g <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">全局安装</span>
<span style="color: rgba(0, 0, 0, 1)">
npm install webpack </span>--save <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">当前目录安装</span></pre>
</div>
<p> </p>
<p data-track="17"><strong>3、安装脚手架</strong></p>
<div class="cnblogs_code">
<pre>npm install @vue-cli -g <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">全局安装</span></pre>
</div>
<p data-track="21">安装完成之后，输入 vue 回车，就能看到 vue 中的命令行，如图：</p>
<div class="pgc-img"><img alt="前端开发3年了，竟然不知道什么是 Vue 脚手架？（上）" class="syl-page-img lazyload" data-src="https://p6-tt.byteimg.com/origin/pgc-image/313a75fc43504f8b912124ed6c22b8c6?from=pc">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="23">官网文档介绍 vue-cli 安装时，可以使用的命令有两种：</p>
<div class="pgc-img"><img alt="前端开发3年了，竟然不知道什么是 Vue 脚手架？（上）" class="syl-page-img lazyload" data-src="https://p3-tt.byteimg.com/origin/pgc-image/5513bf868ac94af0956e63eecf9fbf40?from=pc">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="25">yarn 工具，类似 npm 的基本使用，在性能上比 npm 更好。相同意义命令可能不同。</p>
<h2 class="pgc-h-arrow-right">二、Vue CLI 2.x 初始化项目</h2>
<p data-track="28">vue-cli 3 已经发布一段时间了，现在安装脚手架，都会安装 Vue-cli 3.x 版本，如果我们想要使用 vue-cli 2.x 版本时，需要拉去 vue-cli 2.x 的模板，使用命令如下：</p>
<div class="cnblogs_code">
<pre>npm intstall -g @vue/cli-init</pre>
</div>
<p data-track="33">此时，就可以开始使用 vue-cli 2 创建项目了。</p>
<p data-track="41"><strong>1、创建项目文件夹 vue-cli 2</strong></p>
<p data-track="42"><strong>2、在文件夹内打开 cmd 窗口，输入命令：</strong></p>
<div class="cnblogs_code">
<pre>vue init webpack learn</pre>
</div>
<div class="pgc-img"><img alt="前端开发3年了，竟然不知道什么是 Vue 脚手架？（上）" class="syl-page-img lazyload" data-src="https://p3-tt.byteimg.com/origin/pgc-image/3ee0865587fd4e9d930b428032f5c319?from=pc">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="40">此时已经开始下载模板。</p>
<p data-track="44">根据提示信息，输入对应的信息内容，如图：</p>
<div class="pgc-img"><img alt="前端开发3年了，竟然不知道什么是 Vue 脚手架？（上）" class="syl-page-img lazyload" data-src="https://p6-tt.byteimg.com/origin/pgc-image/46a91c2f28ab47d3a3f3344e20c15de6?from=pc">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="46">vue 项目打包的时候，Runtime+compiler 与 Runtime-only 是有区别的，第一个解释，该命令适用大多数用户，所以我们先选择第一个，后边讲解区别。</p>
<p data-track="47">回车继续创建项目：</p>
<div class="pgc-img"><img alt="前端开发3年了，竟然不知道什么是 Vue 脚手架？（上）" class="syl-page-img lazyload" data-src="https://p3-tt.byteimg.com/origin/pgc-image/1eb884737fd742ad94a43a345fa1b034?from=pc">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="49">提示是否使用 vue-router（路由）、Eslint（代码规范化检测工具），最后提示我们选择使用什么命令进行项目管理，最后一个是手动处理，我们选择大家熟悉的 npm 就好了。</p>
<p data-track="50">现在等着项目创建完成之后，会提示我们进入项目，然后使用命令运行环境。</p>
<div class="pgc-img"><img alt="前端开发3年了，竟然不知道什么是 Vue 脚手架？（上）" class="syl-page-img lazyload" data-src="https://p3-tt.byteimg.com/origin/pgc-image/1fc48464c0904a8b8452042e8e2c407d?from=pc">
<p class="pgc-img-caption"> </p>
</div>
<h2 class="pgc-h-arrow-right">三、Vue-cli 2.x 项目结构解析</h2>
<p data-track="58">首先从 配置文件 webpack.json 文件入手：寻找 scripts ，scripts 中存放的都是一些项目运行、打包、测试等脚本。代码如下：</p>
<div class="cnblogs_code">
<pre>"scripts"<span style="color: rgba(0, 0, 0, 1)">: {
</span>"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"<span style="color: rgba(0, 0, 0, 1)">,
</span>"start": "npm run dev"<span style="color: rgba(0, 0, 0, 1)">,
</span>"build": "node build/build.js"<span style="color: rgba(0, 0, 0, 1)">
}</span></pre>
</div>
<p> </p>
<h3 data-track="56"><strong>3.1、为什么使用 npm run dev 启动服务？</strong></h3>
<p data-track="61">webpack-dev-server 是启动一个webpack本地服务。</p>
<p data-track="62">--inline 运行本地命令</p>
<p data-track="63">--progress 进度</p>
<p data-track="64">--config build/webpack.dev.conf.js 配置执行脚本入口文件</p>
<p data-track="65">所以我们执行 npm run dev 的时候，其实执行的是：</p>
<div class="cnblogs_code">
<pre>webpack-dev-server --inline --progress --config build/webpack.dev.conf.js</pre>
</div>
<p> </p>
<p data-track="57">启动一个本地服务。启动服务的时候，展示项目进度。如果把 --progress 去掉之后，启动服务的时候就不会显示进度了。</p>
<h3 data-track="68">3.2、项目运行后，为啥端口号是8080</h3>
<p data-track="69">找到 config 文件夹内的 index.js 文件，查找 dev中的配置项，就是专门为 npm run dev 执行时的配置项。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">dev: {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">编译输出的二级目录</span>
assetsSubDirectory: 'static'<span style="color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">编译发布的根目录，可配置为资源服务器或cdn域名</span>
assetsPublicPath: '/'<span style="color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">使用 proxyTable代理的接口</span>
<span style="color: rgba(0, 0, 0, 1)">proxyTable: {},
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 开发时候的访问域名，可通过环境变量自己设置</span>
host: 'localhost'<span style="color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">开发时候的端口号，如果被占用会随机分配</span>
port: 8080<span style="color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">浏览器是否自动打开项目 </span>
autoOpenBrowser: <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">是否使用eslint loader检查代码</span>
useEslint: <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">在浏览器展示错误蒙层</span>
errorOverlay: <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 是否展示错误</span>
notifyOnErrors: <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
poll: </span><span style="color: rgba(0, 0, 255, 1)">false</span>, <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-</span>
devtool: 'cheap-module-eval-source-map'<span style="color: rgba(0, 0, 0, 1)">,
cacheBusting: </span><span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
cssSourceMap: </span><span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">
}</span></pre>
</div>
<p> </p>
<h3 data-track="67">3.3、为何使用 npm run build 能够自动打包项目？</h3>
<p data-track="71">npm run build 运行时，其实执行的是： "node build/build.js"。</p>
<p data-track="73">我们之前开发的网页，执行 js 文件的时候，必须引入 某个 html 文件内，浏览器访问 html 文件，渲染的时候才会执行js文件。</p>
<p data-track="74">在node中：node 为 js 执行提供了环境，node 是 C++ 开发的 V8引擎，可以直接把 js 文件运行成二进制代码，所以运行起来很快。node 中执行 js 的时候，直接使用：node xx.js 文件就可以运行了。</p>
<p data-track="76">所以打包项目的时候，执行的是 build 文件夹内的 build.js 文件。</p>
<h2 class="pgc-h-arrow-right">四、项目其他文件介绍</h2>
<p data-track="81">整体的项目目录结构很简单，如图所示：</p>
<div class="pgc-img"><img alt="前端开发3年了，竟然不知道什么是 Vue 脚手架？（上）" class="syl-page-img lazyload" data-src="https://p6-tt.byteimg.com/origin/pgc-image/017860a12d6146829af15768ed3bdfb5?from=pc">
<p class="pgc-img-caption"> </p>
</div>
<ul>
<li>build - 存放执行脚本入口</li>
<li>config - 文件夹内的 index.js ，更多的dev、build配置</li>
<li>node_moudles - 存放依赖包资源</li>
<li>src - 存放开发资源</li>
<li>static - 存放静态资源</li>
<li>.babelrc - 对 ES6转ES5的限制</li>
<li>editorconfig - 编辑器配置</li>
<li>.gitignore - 提交 git 时忽略内容</li>
<li>index.html - 单页面应用的主入口</li>
<li>package-lock.json - 记录依赖包的真实版本</li>
<li>README.md - 使用文档</li>
</ul>
<h2 class="pgc-h-arrow-right">五、Runtime+compiler 与 Runtime-only 区别</h2>
<p data-track="97">我们再新建一个 runtime-only 的项目，发现两个项目只有 main.js 中有区别。两个 main.js 对比如下图：</p>
<div class="pgc-img"><img alt="前端开发3年了，竟然不知道什么是 Vue 脚手架？（上）" class="syl-page-img lazyload" data-src="https://p3-tt.byteimg.com/origin/pgc-image/c9a19c3a2dbb4adcb3d444069f36d616?from=pc">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="99">要问 template 与 render 的区别，这就需要了解 vue 程序的运行过程：</p>
<ul>
<li>template 经过解析(parse) 成 语法抽象树(abstract system tree)</li>
<li>再通过 render 函数进行渲染操作虚拟 DOM (Virtual dom)</li>
<li>然后虚拟 DOM 操作全部完成之后生成真实 DOM</li>
</ul>
<p data-track="105">通过 vue 运行过程，我们不难发现，使用 template 时，多了第一步操作，使用 render 时直接进行第二步。</p>
<p data-track="106">Runtime+compiler 与 Runtime-only 相比，runtime-only 性能更高，写的代码量更少。命令行中已经提示我们，能够压缩 6kb 的代码。</p>
<p data-track="101">render 到底是什么呢？</p>
<p data-track="107">render 函数实质就是生成 template 模板，通过调用一个方法生成，而这个方法又是通过 render 的参数来传递的。</p>
<p data-track="108">用法1：普通用法</p>
<p data-track="111">传递的 createrElement 方法有三个参数，分别提供：标签名、标签属性、标签内容</p>
<div class="cnblogs_code">
<pre>render:<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(createElement){
</span><span style="color: rgba(0, 0, 255, 1)">return</span> createElement('h2',{class:'box'},['内容'<span style="color: rgba(0, 0, 0, 1)">])
}</span></pre>
</div>
<p> </p>
<p data-track="72">通过上述方法，就可以生成一个完整的模板。</p>
<p data-track="113">用法2：组件用法</p>
<p data-track="116">传入的是一个组件对象</p>
<div class="cnblogs_code">
<pre>import App from './App'<span style="color: rgba(0, 0, 0, 1)">
render:</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(createElement){
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> createElement(App)
}</span></pre>
</div>
<p> </p>
<p data-track="114">我们实际 main.js 中，其实是对上边的简写，改写成箭头函数。</p>
<div class="cnblogs_code">
<pre>render: h => h(App)</pre>
</div>
<p> </p>
<p class="syl-page-br" data-track="112"> </p>
<hr>
<p data-track="120">好了小编今天的文章就到此结束了，喜欢我的可以点个关注哦！</p>
<p data-track="121">下篇文章 -- 介绍 vue-cli 3.x 搭建项目</p><br><br>
来源：https://www.cnblogs.com/web-learn/p/15378206.html
頁:
[1]