前端试题(一)

2020-03-28 金卡智能

*1. 脚手架 vue-cli现在用的什么版本，2版本了解多少，2 3有什么区别

绝对路径与相对路径

./ 当前路径
…/父路径
/ 绝对路径
某文件里引用其他路径下的资源：
判断该文件所在文件夹与其他资源路径间的关系。

---

什么？错过了Vue CLI 2！你还要错过Vue CLI3？
区别写得很详细
全局安装一个桥接工具

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：
通过 @vue/cli 搭建交互式的项目脚手架。
通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
一个运行时依赖 (@vue/cli-service)，该依赖：
可升级；
基于 webpack 构建，并带有合理的默认配置；
可以通过项目内的配置文件进行配置；
可以通过插件进行扩展。
一个丰富的官方插件集合，集成了前端生态中最好的工具。
一套完全图形化的创建和管理 Vue.js 项目的用户界面。

商品管理用的vue-cli2
 bulid config 
 vue-cli init webpack name  （init是vue3版本前的指令）
 webpack-dev-server...
 --inline：启动inline模式来自动刷新页面

Vue-cli3.0于2018.8.11日正式发布
public src
vue create name  （create是vue3版本才能用的指令）
vue-config.js修改webpack的配置 
vue-cli-service serve  | npm run serve

vue-cli3.0默认项目目录与2.0的相比，更精简:
1.移除的配置文件根目录下的，build和config等目录，
2.移除了static文件夹，新增了public文件夹，并且index.html移动到public中。
3.在src文件夹中新增了views文件夹，用于分类 试图组件 和 公共组件 。
4.大部分配置 都集成到 vue.config.js这里,在项目根目录下

1 安装
2 目录 配置文件
3 运行
4 cli插件 @vue/cli-plugin-

*2.怎么存储静态资源

1. 用绝对路径 使用相对路径引入的静态资源文件，会被webpack处理解析为模块依赖
2. 且放在public文件夹下 public文件夹下的文件并不会被Webpack处理：它们会直接被复制到最终的打包目录

vue-cli2 版本

1） static – 不打包，直接上传（引入的第三方的资源文件（已经经过处理）我们不再需要处理，直接上传）
2） src/assets – 会被打包（压缩体积，代码格式化，上传至服务器 => 将项目中template需要的样式文件、js文件等都可以放置在assets中，打包减少体积。）
config/index.js

module.exports = {
  // ...
  build: {
    assetsPublicPath: '/',
    assetsSubDirectory: 'static'
  }
}

注意：如果把图片放在assets与static中，html页面可以使用；但在动态绑定中，assets路径的图片会加载失败，因为webpack使用的是commenJS规范，必须使用require才可以，具体代码如下：

  <div id="hook">
    <h3>演示钩子的组件</h3>
    <p>直接使用路径</p>
    <img src="../../assets/11.png" alt="图片加载失败" title="assets中的图片">
    <img src="../../../static/11.png" alt="图片加载失败" title="static中的图片">
    <br>
    <p>动态绑定路径</p>
    <img :src="assetsURL" alt="图片加载失败" title="assets中的图片">
    <img :src="staticURL" alt="图片加载失败" title="static中的图片">
  </div>

data (){
      return {
        assetsURL: require('../../assets/11.png'),
        staticURL: '../../../static/11.png'
      }
    }

vue-cli3 版本

1）public不打包（个人理解相当于2版本static）
2） src/assets

资源打包

• webpack处理静态资源：在所有的*.vue文件中你所有的templates 和CSS 都被vue-html-loader 和css-loader 查询资源的URLs解析. 比如说, 在 img src=”./logo.png” 和background: url(./logo.png) 中./logo.png是一个相对资源路径，并且会被Webpack视为一个模块依赖来解析。
• 因为./logo.png并非一个Javascript，当将它作为模块依赖对待时，我们需要用url-loader和file-loader去处理它。

webpack 中的解析规则

webpack中文文档

• 相对URLs,
  例如 ./assets/logo.png 将会被解释为一个模块依赖.
  它们将会被替换为基于你Webpack输出配置自动生成的 URL
• 无前缀URLs,
  例如. assets/logo.png 将会被像相对URLs一样处理并将被转化</