Vue-CLI脚手架的使用
时间：2021-03？04？
前言
终于进一步推进到了这个层次。
Author：雾雨霜星
欢迎来我的网站学习：
https://www.shuangxing.top/#/passage?id=22
Vue-CLI基本认识
用于搭建前端使用webpack管理依赖的项目工程，是快速完成webpack各种配置和各种需要安装的依赖环境的脚手架。
主要是省去了之前webpack搭建项目中需要安装的各种包的过程，可以快速开始使用vue进行前端项目的开发。
Vue-CLI安装与初始化
-
安装： 首先需要确定环境：
- NodeJS环境，需要NodeJS版本9及其以上
- 需要有全局webpack
进行安装：
-
安装nodejs，直接去官网安装即可。 -
安装全局webpack，在系统命令行输入：npm install -g webapck -
安装vue脚手架，在系统命令行输入：npm install -g @vue/cli，安装非常慢需要等待很久。
- 如果发现很久也安装不了，那么可以试一下使用cnpm来进行安装。
-
拉取vue-cli2的模板，在终端输入：npm install -g @vue/cli-init 有了脚手架2的模板，就可以在vue中既使用vuecli2也行，使用最新的脚手架也行。 -
使用指令vue --version进行版本查看： 可以看到，我安装的vue-cli版本是4.5.11。
-
使用Vue-CLI进行项目初始化：
-
使用vue-cli2的初始化方法： 在webstorm中打开终端，进入到存放所有工程的目录下，将在该路径下建立新的工程。在终端输入：vue init webpack 工程名字，回车等待模板的下载与载入，完成后可以看到在这个路径下生成了新的工程项目。 在进行初始化期间，终端会对项目初始化的要求作出询问，只需要更据自己项目需求进行确认即可。主要询问的是：
-
Project name：即确定你要建立的工程的名字，默认是初始化指令中指定的名字。 注意，项目名称最好全部是英文且不能有大写，最好全是英文小写。 -
Project description：确定对项目的描述。 -
Author：确定项目的作者名。 -
Vue Build：建立项目所使用的编译器，选择runtime-only即可。 -
Install Vue-router：是否使用vue路由，后面使用再加入，因此先选不使用。 -
Use ESLint to lint your code：是否使用ES代码标准对代码进行规范约束。对相关的规范约束不熟悉，因此我选不使用。 -
Set up unit test：是否开启单元测试。后面需要使用再加入，因此我选择不使用。 -
Setup e2e tests with Nightwatch：大概是是否使用某种模块进行端到端的测试。不认识，后面使用再加，因此选不使用。 -
npm/yarn：最终会询问是使用哪种包管理方法，选择使用NPM即可。
-
使用vue-cli3的初始化方法： 同样打开webstorm终端，在放置各个工程的目录下建立工程，输入：vue create 工程名字，回车等待输入相应要求即可。
Vue-CLI2工程目录结构
在完成了使用脚手架对工程进行初始化，可以看到新的工程中生成了很多文件。在这里简单记录这些文件的用途。‘
详细可以参考：https://blog.csdn.net/weixin_44872023/article/details/107114823
- build文件夹：用于存放webpack相关配置的文件。
- config：vue基本配置
- node_modules：依赖包
- src：项目核心源码
- assets：样式类静态资源
- components：公共组件
- static：图片类静态资源
- index.html：主页
后面做了对各个文件的分析笔记。
RuntimeOnly 与 RuntimeCompile
其不同的地方在于vue中vue的组件template渲染到DOM的过程。
RuntimeOnly是从vue组件template直接通过render渲染成虚拟DOM元素，然后进行调用成为DOM元素。
RuntimeCompile是vue组件template先转化为ast(抽象结构树)，然后再通过render进行处理。
这两者在项目中最明显的区别是main.js中对vue实例的内部函数结构，RuntimeOnly是：
new Vue({
el: '#app',
router,
render: h => h(App)
})
可见直接使用了render的箭头函数。
总而言之，RuntimeOnly更加轻量和更高效率，而RuntimeCompile这部分代码更加易懂，过程更加清晰。
VueCLI3
使用 vue create 项目名字 来进行VueCLI项目的初始化。
初始化会问相应配置，选择Manuelly，自己选择需要的模块，空格表示选择，回车进行所有确认。
如果选择了Router，还会问是否开启history模式。
然后对应VueCLI3项目，目录结构中不再有static，但是有一个public，相当于以前的static。
然后会发现，没有配置文件。
这是因为VueCLI3开始，具有了可视化配置的功能，在终端输入 vue ui，等待稍久，就会默认在8080端口开启vue的可视化配置界面，会自动打开浏览器进入该页面，选择把项目导入后就进入了相应的配置界面。里面有插件、依赖等配置。
打包
在终端中使用npm run build来进行打包，打包后可以看到目录下有一个dist文件夹，所有打包后的文件都在里面。
在dist中有一个static文件夹与inde.html文件，其中inde.html就是主页，也是单页面应用的那个页面，而static文件夹里面有css文件夹和js文件夹，这是因为打包会把所有非主页资源视为静态资源进行包装，其中css文件夹里面就是我们所写的所有的css代码打包后的内容，而js文件夹中一般有三个js文件，分别是：
app.cd6d61cac583baedf429.js:业务代码的打包js，当前所写的所有代码都打包到这个文件。
manifest.3ad1d5771e9b13dbdad2.js:用于为打包的代码做底层支持的js，使得代码的导入导出对浏览器有效。
vendor.6baba3bf80904d146eba.js:第三方方所有代码打包的js，第三方框架例如vue、vue-route。
基本就是app、manifest、vendor，中间是一串自动生成的hash值。
Vue-CLI打包后无法加载资源问题
在npm run dev指令后浏览器中调试一切正常，使用npm run build后打包，在dist中的html打开空白，浏览器调试检查发现是各种资源都没有加载进来，报错如下：
Refused to apply style from 'http://localhost:63342/static/css/app.4bb41abb74a9b4bf678d0c4cf9e4f61c.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
manifest.2ae2e69a05c33dfc65f8.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
app.b98e532d0aa615bb8721.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
vendor.6baba3bf80904d146eba.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
app.b98e532d0aa615bb8721.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
index.html:1 Refused to apply style from 'http://localhost:63342/static/css/app.4bb41abb74a9b4bf678d0c4cf9e4f61c.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
这个问题可能与相关的路径有关，看了一些资料，应该是修改config文件夹中的index.js文件，在里面有个build字段，里面有个assetsPublicpath属性，需要修改，把 ‘ / ’ 改为 ‘ ./ ’ 即可。
assetsSubDirectory: 'static',
assetsPublicPath: './',
proxyTable: {},
注意，dev字段的assetsPublicpath属性不需要修改，否则会出现dev调试出现以上错误的问题。
对于VueCLI3的项目，同样有这个问题，需要进入vue ui，到配置那里，修改BaseURL。
转载请注明出处！！！
Author：雾雨霜星
欢迎来我的网站学习：
https://www.shuangxing.top/#/passage?id=22
Thanks！
PS: 毕竟，霜星酱水平有限，如果发现任何错误还请及时邮箱告知我，我会去改哦！
|