目录
项目准备
1.创建文件
mkdir webpack-vue && cd webpack-vue
复制代码
2.初始化文件
1.主要创建package.json
npm init
复制代码
3.创建业务目录
4.创建配置文件
1.webpack.config.js
touch webpack.config.js
复制代码
5.文件配置
- entry:入口起点
- module:配置loader
- plugins:提供插件
- output:输出文件
- resolve:配置模块如何解析
- devtool:以及如何生成 source map
- devServer:开启服务
6.安装依赖包
npm install --save-dev webpack-dev-server
npm i html-loader vue-loader node-sass style-loader css-loader sass-loader -D
npm i vue vue-router
npm i webpack webpack-cli -D
npm i html-webpack-plugin clean-webpack-plugin
npm i vue-template-compiler -D
npm i vue-style-loader -D
复制代码
项目总结:
1.webpack webpack-cli必须同时安装
2.配置sass环境时,必须安装node-sass
3.取消loaders配置
改成:
rules:[{
test:/\.html$/,
loader:'html-loader'
},...]
复制代码
4.vue-loader加载不上
解决方式:
const VueLoaderPlugin = require('vue-loader/lib/plugin');
复制代码
5.报这样的错误信息
vue.runtime.esm.js:620 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. (found in )
解决方法配置
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
}
},
复制代码
webpack.config.js配置文件
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './app/js/main.js',
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
},
module: {
rules:[
{
test:/\.html$/,
loader:'html-loader'
},
{
test:/\.vue$/,
loader:'vue-loader'
},
{ test: /\.css$/,
use: [
"vue-style-loader",
"css-loader"
]
},
{
test: /\.scss$/,
use: [{
loader: "style-loader" // 将 JS 字符串生成为 style 节点
}, {
loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
}, {
loader: "sass-loader" // 将 Sass 编译成 CSS
}]
}
]
},
plugins:[
new CleanWebpackPlugin(),
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: './app/views/index.html'
})
],
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
}
},
output:{
filename: '[name].min.js',
path: path.resolve(__dirname, 'dist')
}
}
复制代码
项目链接
项目总结
一面
1.做过哪些项目?
2.为什么用Vue框架?
3.在项目中的角色是什么?解决过哪些难题?
4.通过这个项目学到了什么?
二面
1.项目要怎么准备?
2.项目该怎么介绍?
3.沟通有哪些技巧?
4.项目该怎么介绍?
项目背景-》项目收益-》项目设计-》项目总结
三面实战
1.为什么选择vue框架?
2.vue的双向绑定是如何实现的?
3.有木有使用CSS Module,基本原理是什么,Vue该如何做?
4.开启CSS Module之后如何使用第三方样式库?
5.vue的安装包有几个版本,遇到问题如何解决的?
6.你的项目有什么特色,解决过什么问题,用了什么技术方案?
7.为什么选择webpack构建工具?
8.项目是如何使用webpack的?dev-server的原理是什么?
9.有木有实现一个webpack的loader?
10.如何做任务管理的?
11.自适应方案应该怎么做,原理是什么,
12.rem和em的区别?
13.前后端分离是如何做的?
14.前端的路由是什么原理?
复制代码