2) 创建Vue根实例
编写main.js
3) 挂载App组件
Step1 编写App.vue文件
Step2 挂载到根实例
在main.js中, 完成如下操作
-
导入App组件对象
-
挂载到Vue根实例
Step3 使用App标签渲染
这里的App相当于在components中定义的组件名
3 引入main.js测试
三. webpack基本配置
为了让浏览器能够正确的解析, 我们需要使用webpack将我们的源代码进行打包
1 创建webpack配置文件
在根目录下创建webpack配置文件webpack.config.js, 编写最基本的配置
-
entry: 指定打包的入口
-
output: 指定打包的出口, 也就是最终生成的文件
2 编写webpack脚本
在packpage.json中, 创建一个执行脚本
这样就可以通过 npm run build 来执行webpack打包了
3 测试
在命令行中执行 npm run build
会发现提示这个错误
原因是: webpack只能打包js文件. 对于后缀名为vue的文件不能打包. 如何解决呢?
通过vue-loader来打包vue文件
找到vue-loader的官网: https://vue-loader.vuejs.org/zh/guide/#vue-cli
对于最新的vue-loader@15版本, 按照官网的指导, 做如下配置
1 安装vue-loader
执行命令, 安装vue-loader
npm install -D vue-loader vue-template-compiler
2 安装css-loader
执行 npm install -D css-loader
3 webpack配置
从vue-load@15版本开始, vue-loader需要在webpack中添加一个插件
解决警告小问题
我们发现在webpack打包时会出现这个警告
找到webpack.config.js在配置中添加mode
5 在主页中引入bundle.js
在index.html中引入bundle.js测试, 发现报错
打包成功!
6 小结
-
webpack本身只能打包js文件, 如果要打包其他文件就需要借助于loader
-
loader其实就是专门用于打包特定文件的处理程序
五. 其他常用loader
一般来说, 一个前端项目除了js文件外, 还有一些常用的文件, 如
图片文件
-
css文件
-
对于这些文件, webpack都不会打包, 需要我们安装对应的loader帮助webpack打包
1. 打包图片文件
- file-loader-----file-loader: 将文件复制到对应的路径, 并返回文件名
i 安装file-loader
npm install -D file-loader
-
test: 正则表达式–如果需要打包的文件以jpg或者jpeg或者png或者svg结尾时
-
loader: 使用file-loader
ii 测试
在src目录下创建assets目录, 存放静态资源文件(如: images/styles/fonts等)
原理: 当遇到jpg结尾的文件时, 使用file-loader将文件copy到dist目录下. 文件名是图片的hash值
如果希望保留原有的文件名, 可以使用占位符(placeholder)配置
-
[name] : 占位符, 表示使用原文件名
-
[ext] : 占位符, 表示使用原文件扩展名
2) url-loader----好处是: 直接将小图片打包以base64打包在js中, 减少Http请求的次数, 提高访问效率
i 安装url-loader
执行命令, 安装url-loader
npm install -D url-loader //同时安装file-loader和url-loader
ii 配置
修改webpack配置, 添加一条规则
-
test: 正则表达式–如果需要打包的文件以jpg或者jpeg或者png或者svg结尾时
-
loader: 使用url-loader
-
options: 选项
-limit: 当文件小于2048byte时, 以base64打包到js中, 当文件大于2048byte时, 使用file-loader打包
-name: 打包的文件名使用"源文件名.扩展名"方式
ii 测试
复制两张小的svg图片到assets目录下. 并在App.vue中导入
运行打包命令 npm run build , 在新生成的bundle.js中, 可以看到
2 打包css文件
3 打包stylus文件
目前, stylus做为node项目普通使用的css预处理器被广泛的应用于vue项目中. 大家会发现大部分的vue
项目中都会使用stylus来编写css
1) 推荐的vscode插件与配置
2) 打包stylus文件
i 安装stylus-loader
npm install -D stylus stylus-loader
-
stylus: 是stylus文件预处理程序, 作用是将stylus编译成css格式
-
stylus-loader: 加载stylus文件, 调用stylus预处理程序形成css文件
use: 依次使用stylus-loader, css-loader, style-loader处理
iii 测试
在styles下编写global.styl文件, 编写如下内容
body
// 背景图片
background-image: url(‘…/images/bg.jpg’)
// 背景图片位置固定
background-attachment: fixed
// 背景不要重复
background-repeat: no-repeat
// 背景位置居中
最后
除了简历做到位,面试题也必不可少,整理了些题目,前面有117道汇总的面试到的题目,后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。