搭建webpack +babel + vue项目以及编写单文件和自定义组件
其他
2020-03-17 10:07:47
阅读次数: 0
搭建webpack +babel + vue项目的操作步骤
- 1. 新建一个存放项目的文件夹
我新建的文件名为demoVue
- 2. 打开cmd,执行cd指令到该文件夹下
- 3. 可执行
npm init
命令,自己配置一下,我这边直接执行npm init -y
,使用默认配置
可以看见文件夹下面生成了一个package.json
- 3. 执行指令:
cnpm i webpack webpack-cli vue-loader babel-core babel-loader -D
没有cnpm的话百度一下,也是一大堆,或者就用npm,只不过会慢一点。这里需要安装webpack、webpack脚手架、vue-loader、以及babel-core和用来处理高版本js的babel-loader,-D的意思是开发环境,-S是生成环境
- 4. 在放项目的demoVue文件夹下创建一个webpack的配置文件——webpack.config.js
webpack.config.js内容 const path = require('path')
const {VueLoaderPlugin} = require('vue-loader')
module.exports = {
mode: 'development',
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [new VueLoaderPlugin()],
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader'
}
]
}
}
- 5. 同样在放项目的demoVue文件夹下创建入口文件——index.js
先不用放内容,看下后面能不能生成文件
- 6. 创建完成后可以通过终端输入
webpack index.js
试一下能不能运行成功了
我这边报了个错,它的意思是你不应该使用6的版本,应该下载7版本
那我把babel-loader更新到7,如果有同样报错终端上执行cnpm i babel-loader@7 -D
再试了一下webpack index.js
原因babel到了7版本后跟其他的东西一些分离了,所以还要下载cnpm i babel-preset-env -D
在放项目的demoVue文件夹下创建文件 .babelrc
.babeIrc内容 {
"presets": ["env"]
}
然后终于成功了
可以看见成功后,dist下多了一个生产的bundle.js文件
- 7. 安装vue,终端指令:
cnpm i vue -D
以及 vue的模板编译的插件 cnpm i vue-template-compiler -D
,因为这个插件和vue-loader到15版本以后也分离了
- 8. 在放项目的demoVue文件夹下新建文件——app.vue,并且配置一下index.js
app.vue内容 <template>
<div>
这是app
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
index.js内容 import Vue from 'vue'
import App from './app.vue'
new Vue({
el: '#app',
render: h => h(App)
})
- 9. 最终测试 终端指令
webpack index.js
打包成功
单文件组件
- 1. 上面步骤8中的app.vue就是一个单文件组件
- 2. 为了看下单文件及搭建完成后的效果,在demoVue文件夹下建了一个index.html
index.html内容 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./dist/bundle.js"></script>
</body>
</html>
将index.html用浏览器打开后的效果
- 当前项目整体结构
demoVue
|——dist(执行webpack index.js生成)
|——node_modules(npm下载生成)
|——.babeIrc
|——app.vue
|——index.html
|——index.js
|——package.json
|——webpack.conig.js
自定义组件
- 1. 在demoVue文件夹下新建一个文件夹component,在component文件夹下创建一个loading.vue的文件和一个index.js文件
loading.vue内容 <template>
<div>
数据加载中...
</div>
</template>
index.js内容 import loadingCom from './loading.vue'
export default {
install: (Vue) => {
Vue.component('loading', loadingCom)
}
}
- 2. 编写一下外面入口文件的index.js并在app.vue引用自定义组件
index.js内容
在index.js中添加代码
import Loading from ‘./component/index’
Vue.use(Loading) import Vue from 'vue'
import App from './app.vue'
import Loading from './component/index'
Vue.use(Loading)
new Vue({
el: '#app',
render: h => h(App)
})
app.vue内容
添加一个loading即可 <template>
<div>
这是app
<loading></loading>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
记得保存,然后终端执行webpack index.js
,打开index.html可以看到效果
- 当前项目整体结构
demoVue
|——component
| |——index.js
| |——loading.vue
|——dist(执行webpack index.js生成)
|——node_modules(npm下载生成)
|——.babeIrc
|——app.vue
|——index.html
|——index.js
|——package.json
|——webpack.conig.js
发布了56 篇原创文章 ·
获赞 20 ·
访问量 7366
转载自blog.csdn.net/qq_36826618/article/details/104210047