初始化
npm init -y
安装webpack
npm install webpack webpack-cli -D // D是--save-dev 的简写
创建项目入口
创建一个HTML文件,并且创建根节点,id为app
安装vue
npm install vue
创建项目根实例
main.js
import Vue from 'vue'
// 创建实例
new Vue({
el: '#app'
})
挂载App组件
App.vue
<template>
<div>this is myapp</div>
</template>
<script>
export default {
name: "App",
};
</script>
挂载到根实例
main.js
import Vue from 'vue'
// 导入App组件
import App from './App.vue'
// 创建实例
new Vue({
el: '#app',
components: { App },
// 使用组件标签作为模板
template:'<App />'
})
webpack打包工具的构建
webpack.config.js
const path = require('path')
module.exports = {
// 打包的入口
entry: './src/main.js',
// 打包的出口
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
使用vue-loader打包vue文件
安装vue-loader和vue-template-compiler
npm install -D vue-loader vue-template-compiler
vue的版本必须和vue-template-compiler编译器的版本一致,他们的发布也是一起发布的,这样loader才会生成兼容代码
webpack配置解析vue文件
- vue loader的配置是必须要引入 new VueLoaderPlugin()插件的
- 下面代码中设置的饿规则是为了vue loader应用到所有vue文件
- new VueLoaderPlugin()插件的作用就是将其他规则应用到vue文件里面相应的模块,如js规则的应用到scrpt模块
const path = require('path')
// 导入loader插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
// 打包的入口
entry: './src/main.js',
// 打包的出口
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
// loader插件配置
module: {
rules: [
// 配置解析vue文件
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
// 一定要引入此插件
new VueLoaderPlugin()
]
}
vue-loader依赖css0loader,所以安装css-loader
npm install -D css-loader
上面警告解决办法
在主页中引入 bundle.js,并且拿到对应文件
```javascript
const path = require('path')
// 导入loader插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
// 模式
mode: 'development',
// 打包的入口
entry: './src/main.js',
// 打包的出口
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
// loader插件配置
module: {
rules: [
// 配置解析vue文件
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
// 一定要引入此插件
new VueLoaderPlugin()
],
// 使用别名
// 作用就是:webpack打包会生成三个文件
/*
runtime only 的文件 vue.common.js
compiler only 的文件 compiler.js
runtime + compiler 的文件 vue.js
*/
// 而默认导出的是 vue.common.js,正常是 runtime + compiler 的文件 vue.js ,下面就是解决办法
resolve: {
alias: {
'vue': 'vue/dist/vue.js'
}
}
}