vue-cli提供了的哪几种脚手架模板?
vue-cli2.x 好像有个simple和完整版的
vue-cli3.x 提供了自定义装箱配置 可以选装
TypeScript
PWA
lint
e2e
css 预处理
router
vuex
vue-cli工程中常用的npm命令有哪些?
npm install:下载 node_modules 资源包的命令
==思考问题:==
为什么下载资源包要用npm install? 请你谈一下
npm run dev: 启动 vue-cli 开发环境的 npm命令(3.0以下😔 ☞ 脚手架2启动方式)
npm run serve:启动 vue-cli 开发环境的 npm命令(3.0以上😀 ☛ 脚手架3启动方式)
npm run build: vue-cli 生成 生产环境部署资源 的 npm命令(常说的打包文件)
脚手架2打包,生成的是build文件
脚手架3打包,生成的是dist文件
serve build (脚手架2,把你写好的项目打包,然后在本机测试,查看是否完整)
serve dist (脚手架3,把你写好的项目打包,然后在本机测试,查看是否完整)
因为你最后直接给的是打包文件,交工之前直接测试一下,运行打包文件,查看项目是否完整
5.npm run build--report:用于查看 vue-cli 生产环境部署资源文件大小的 npm命令。(脚手架2、3不一样)
在使用vue-cli开发vue项目时,自动刷新页面的原理你了解吗?
自动刷新页面并不是vue-cli的功能,而是webpack的hot-module-replacement-plugin插件在做这件事,这个插件是webpack自带的插件,用来做热更新的。如果需要配置hmr只需要在webpack.config.js的devServer字段写 下面的配置即可。
{
contentBase: 服务器可以访问的根目录,
hot:true, //开启热模块替换也就是热更新
hotOnly:true //不刷新页面,只做热更新
}
而由于vue-cli3集成了webpack的配置,所以vue.config.js里面也有这个属性,配置写法是一样的。
vue-cli怎么解决跨域的问题?
vue-cli 主要在本地通过本地服务器拦截转发请求的模式解决跨域问题。
步骤:
config中设置proxy,这步决定哪种命名规则(比如'/abc/'开头的请求)的请求将被拦截(个人以为是通过改造XMLHttpRequest对象)到本地跨域服务器
本地服务器转发请求到目标服务器
本地服务器设置允许跨域的headers,然后返回结果,从而解决跨域
跨域问题,除了单机修改浏览器配置外,都是服务器端配合进行解决。
vue-cli无法解决跨域问题。真正解决跨域问的是webpack。只不过vue-cli3.0将webpack的配置继承到了vue.config.js中,才给初学者造成了vue-cli可以解决跨域的错觉。
与在webpack.config.js中配置跨域一样,在vue.config.js中的devServer:{proxy:{}}字段可以编写跨域配置。
vue-cli中你经常的加载器有哪些?
vue-loader/style-loader/sass-loader/url-loader...
说下你了解的vue-cli原理?你可以自己实现个类vue-cli吗?
vue-cli3你有使用过吗?它和2.x版本有什么区别?
vue-cli3.0 将webpack的配置集成了进来,使用vue-cli3.0创建的项目在配置webpack的时候可以直接在vue.config.js里面配置。既可以用chainwebpack的链式语法也可以直接在configureWebpack字段内直接写webpack原生的配置。