前端开发3年了，竟然不知道什么是 Vue 脚手架？（下）
<p data-track="1">上一篇文章《前端开发3年了，竟然不知道什么是 Vue 脚手架？（上）》介绍了什么是脚手架，以及Vue-cli 2.x如何创建项目，创建的项目结构。这篇文章介绍 Vue-cli 3.x 如何构建项目？</p><h2 class="pgc-h-arrow-right">一、Vue-cli 2 与 Vue-cli 3的区别</h2>
<ol start="1">
<li>vue-cli 3 是基于 webpack 4 打造的，vue-cli 2 还是 webpack 3。</li>
<li>vue-cli 3 的设计原则是 “0配置”，移除 build 和 config 等配置目录。</li>
<li>vue-cli 3 提供了 vue ui 命令，提供可视化配置，更加人性化。</li>
<li>vuc-cli 3 移除 static 文件夹，新增 public 文件夹，index.httml 移入了 public 文件夹。</li>
</ol>
<p data-track="9">接下来看看，vue-cli 3 是如何创建项目的，以及可视化配置是怎么样的？</p>
<h2 class="pgc-h-arrow-right">二、Vue CLI 3.x 初始化项目</h2>
<p data-track="11">2.1、新建项目文件夹，打开命令行</p>
<pre class="syl-page-code hljs lua"><code>vue <span class="hljs-built_in">create learn</span></code></pre>
<p data-track="13">运行以上命令，创建文件名为learn的vue项目。</p>
<p data-track="15">运行命令如下图：</p>
<div class="pgc-img"><img alt="前端开发3年了，竟然不知道什么是 Vue 脚手架？（下）" class="syl-page-img lazyload" data-src="https://p6-tt.byteimg.com/origin/pgc-image/13fe788ed8034efbb3421911dad27af9?from=pc">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="14">方框内提示我们发现有可用新版本脚手架，可以运行下边命令进行更新。</p>
<p data-track="16">下边有三个选项，分别为：</p>
<ul>
<li>Please pick a preset:(Use arrow keys) - 请选择一个已配置的关键字选项</li>
<li>default (babel,eslint) - 默认的，选babel和eslint包</li>
<li>Manually select features - 手动选择需要的特性</li>
</ul>
<p data-track="20">2.2、选择最后一个手动配置</p>
<div class="pgc-img"><img alt="前端开发3年了，竟然不知道什么是 Vue 脚手架？（下）" class="syl-page-img lazyload" data-src="https://p6-tt.byteimg.com/origin/pgc-image/b25a60fcd6a04e3cbdee5e8a97bed61a?from=pc">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="22">选择之后，如上图。最前边的括号内有个绿色星号，表示被选中，我们可以使用上下箭头进行切换，点击空格进行选中和取消。</p>
<p data-track="23">根据需要，选择完成之后，点击回车继续向下。</p>
<p data-track="24">2.3、选择配置文件类型</p>
<div class="pgc-img"><img alt="前端开发3年了，竟然不知道什么是 Vue 脚手架？（下）" class="syl-page-img lazyload" data-src="https://p3-tt.byteimg.com/origin/pgc-image/aa059c7b6bb44c7880149bb749c8a1f8?from=pc">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="25">In dedicated config files - 独立配置文件</p>
<p data-track="26">In package.json - 配置信息放入 package.json文件</p>
<p data-track="27">选择 独立配置文件之后，继续向下。</p>
<p data-track="28">2.4、是否保存本次创建项目特性作为配置项？</p>
<p data-track="31">提示后携带(y/n)，输入y表示确定保存配置，n表示取消保存。</p>
<div class="pgc-img"><img alt="前端开发3年了，竟然不知道什么是 Vue 脚手架？（下）" class="syl-page-img lazyload" data-src="https://p6-tt.byteimg.com/origin/pgc-image/7b2f1f4f24324631926dfa792d52e683?from=pc">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="30">我们选择 y 保存之后，以后创建项目就不需要选择这么多了，一键就可以生成项目。</p>
<div class="pgc-img"><img alt="前端开发3年了，竟然不知道什么是 Vue 脚手架？（下）" class="syl-page-img lazyload" data-src="https://p1-tt.byteimg.com/origin/pgc-image/e8b0acbf43d840aa9aa0fea956deb0b1?from=pc">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="32">紧接着需要配置键值，下次我们可以通过键值就能看到，比如设置一个前端人的简写：qdr。回车之后项目就开始创建了。</p>
<p data-track="33">2.5、如何查看之前保存的配置选项，如果不需要了我们如何删除呢？</p>
<p data-track="34">再次创建项目的时候，第一个选项就多了一项，如图：</p>
<div class="pgc-img"><img alt="前端开发3年了，竟然不知道什么是 Vue 脚手架？（下）" class="syl-page-img lazyload" data-src="https://p3-tt.byteimg.com/origin/pgc-image/82c552190c0a4d6c854d4471b98e198f?from=pc">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="36">第一个 “qdr” 是我们上次创建项目保存的配置信息。如果我们不想要了，或者保存的多了之后，把不常用的就需要删除掉，可以进入：C/user/Administrator 查找 .vuerc 文件。</p>
<p data-track="37">rc = run command,vuerc也就是vue的运行命令，它的内容如下：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">{
</span>"useTaobaoRegistry": <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
</span>"presets"<span style="color: rgba(0, 0, 0, 1)">: {
</span>"qdr"<span style="color: rgba(0, 0, 0, 1)">: {
</span>"useConfigFiles": <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
</span>"plugins"<span style="color: rgba(0, 0, 0, 1)">: {
</span>"@vue/cli-plugin-babel"<span style="color: rgba(0, 0, 0, 1)">: {}
}
}
},
</span>"latestVersion": "4.5.13"<span style="color: rgba(0, 0, 0, 1)">,
</span>"lastChecked": 1630908642473<span style="color: rgba(0, 0, 0, 1)">
}</span></pre>
</div>
<p> </p>
<p data-track="39">我们只需要删除 presets 中，不想要的配置项就好了，再运行命令，命令中就没有了。</p>
<p data-track="40">如此，我们的vue-cli 3的项目就创建完成了。</p>
<h2 class="pgc-h-arrow-right">三、Vue-cli 3 项目结构介绍</h2>
<p data-track="43">对新建的项目结构截图，如下图：</p>
<div class="pgc-img"><img alt="前端开发3年了，竟然不知道什么是 Vue 脚手架？（下）" class="syl-page-img lazyload" data-src="https://p1-tt.byteimg.com/origin/pgc-image/d1b3ebf1851149c7a6219e5ca62e6056?from=pc">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="45">它们的文件以及对应的意义如下：</p>
<ul>
<li>node_modules - 项目需要用的node包</li>
<li>public - 相当于static 文件夹，原样输出</li>
<li>src - 开发资源</li>
<li>.browserslistrc - 浏览器相关配置</li>
<li>.gitignore - 设置提交 git 的忽略信息</li>
<li>babel.config.js - 对 babel 配置信息</li>
<li>package-lock.json - 记录依赖包的真实版本</li>
<li>package.json - 配置文件</li>
<li>README.md - 使用介绍</li>
</ul>
<h2 class="pgc-h-arrow-right">四、项目运行</h2>
<p data-track="56">打开 package.json 文件，查找 scripts 内运行脚本，我们发现 server 。</p>
<div class="cnblogs_code">
<pre> "scripts"<span style="color: rgba(0, 0, 0, 1)">: {
</span>"serve": "vue-cli-service serve"<span style="color: rgba(0, 0, 0, 1)">,
</span>"build": "vue-cli-service build"<span style="color: rgba(0, 0, 0, 1)">
},</span></pre>
</div>
<p> </p>
<p data-track="59">4.1、启动服务</p>
<pre class="syl-page-code hljs coffeescript"><code><span class="hljs-built_in">npm run serve</span></code></pre>
<p data-track="61">4.2、main.js 内容改变了</p>
<div class="cnblogs_code">
<pre>import Vue from 'vue'<span style="color: rgba(0, 0, 0, 1)">
import App from </span>'./App.vue'<span style="color: rgba(0, 0, 0, 1)">
Vue.config.productionTip </span>= <span style="color: rgba(0, 0, 255, 1)">false</span>
<span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> Vue({
render: h </span>=><span style="color: rgba(0, 0, 0, 1)"> h(App),
}).$mount(</span>'#app')</pre>
</div>
<p> </p>
<p data-track="63">我们发现之前的 el:'#app' 丢失了，而后边又多了 $mount("#app")。</p>
<p data-track="64">el: "#app" , 是挂载实例的</p>
<p data-track="65">$mount("#app") 功能是一样的，所以替换下与之前的vue-cli使用runtime-only是一致的。</p>
<p data-track="66">运行，打包配置与之前都是差不多，最重要的是vue-cli 3多了一个图形化界面管理工具，具体看看如何使用。</p>
<h2 class="pgc-h-arrow-right">五、图形化界面管理工具</h2>
<p data-track="68">使用命令，启动我们的图形化界面管理服务，使用：</p>
<pre class="syl-page-code hljs nginx"><code><span class="hljs-attribute">vue ui</span></code></pre>
<p data-track="71">启动之后，提示我们服务地址为：http://localhost:8000/</p>
<div class="pgc-img"><img alt="前端开发3年了，竟然不知道什么是 Vue 脚手架？（下）" class="syl-page-img lazyload" data-src="https://p6-tt.byteimg.com/origin/pgc-image/c18b4f86288d4601865141c61a5e8968?from=pc">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="72">第一次进入之后，没有选择的项目，所以提示我们先导入项目。</p>
<p data-track="73">5.1、启动项目、打包</p>
<p data-track="74">选择一个项目，进行导入之后，界面自动切换</p>
<div class="pgc-img"><img alt="前端开发3年了，竟然不知道什么是 Vue 脚手架？（下）" class="syl-page-img lazyload" data-src="https://p3-tt.byteimg.com/origin/pgc-image/1e9f3bcc4f364e4ea46991607b0ad32d?from=pc">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="76">选择任务 -> serve -> 点击开始运行，就可以看到项目的具体运行情况，文件大小、包的依赖、运行时间，服务地址等等。</p>
<div class="pgc-img"><img alt="前端开发3年了，竟然不知道什么是 Vue 脚手架？（下）" class="syl-page-img lazyload" data-src="https://p3-tt.byteimg.com/origin/pgc-image/2ca4502db98345ed91938c6408eea241?from=pc">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="77">build 是进行打包的。</p>
<p data-track="78">5.2、项目配置</p>
<p data-track="79">之前修改配置信息的时候，我们需要在代码的配置文件中修改，vue-cli 3提供的图形化界面管理工具，可以直接在页面上修改配置信息。</p>
<p data-track="80">配置信息分别如下图：</p>
<div class="pgc-img"><img alt="前端开发3年了，竟然不知道什么是 Vue 脚手架？（下）" class="syl-page-img lazyload" data-src="https://p1-tt.byteimg.com/origin/pgc-image/a3ab5278f2164e0ebeaca400c878cb68?from=pc">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="81">特殊说明下：启动运行时编译</p>
<p data-track="83">我们上篇文章介绍 Runtime+compiler 与 Runtime-only区别，启动运行时编译 其实就是选择Runtime-only 模式。</p>
<p data-track="84">5.3、依赖包安装</p>
<p data-track="85">我们选择依赖选项，就会展示项目当前的运行依赖和开发依赖。如图所示：</p>
<div class="pgc-img"><img alt="前端开发3年了，竟然不知道什么是 Vue 脚手架？（下）" class="syl-page-img lazyload" data-src="https://p1-tt.byteimg.com/origin/pgc-image/34ba5eba65b94d9382fac3e8f951b432?from=pc">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="87">之前我们需要安装依赖的时候，运行命令去安装，如：我们需要安装vue-router的时候，需要使用命令：</p>
<pre class="syl-page-code hljs sql"><code>npm <span class="hljs-keyword">install vue-router <span class="hljs-comment">--save-dev</span></span></code></pre>
<p data-track="89">但是现在就不需要了，只需要点击 “安装依赖”，搜索 vue-router，选择运行依赖或开发依赖，然后点击安装就可以了，不需要我们记住命令。</p>
<p data-track="90">5.4、安装插件</p>
<p data-track="91">插件与依赖包有些类型，直接点击添加，安装就可以了。</p>
<p data-track="92">图形化界面管理工具使用起来还是很方便的，推荐使用哦！小编今日分享就要介绍了，喜欢的可以点赞关注不迷路，感谢支持！</p><br><br>
来源：https://www.cnblogs.com/web-learn/p/15384159.html
頁:
[1]