webpack搭建vue脚手架
时间: 2023-11-08 13:57:59 浏览: 48
1. 安装webpack和vue-cli
首先需要在本地安装webpack和vue-cli,可以通过以下命令进行安装:
```
npm install webpack -g
npm install vue-cli -g
```
2. 创建项目
使用vue-cli可以快速创建一个vue项目,执行以下命令:
```
vue init webpack my-project
```
其中my-project是项目名,可以自定义。执行命令后会提示输入一些选项,比如项目描述、作者等信息。最后会自动生成一个项目目录。
3. 安装依赖
在项目目录下执行以下命令安装依赖:
```
cd my-project
npm install
```
4. 配置webpack
在项目目录中找到webpack.config.js文件,这个文件是webpack的配置文件,可以在其中进行配置。一般情况下,我们需要配置入口文件、输出文件、加载器和插件等。以下是一个示例配置:
```
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
})
],
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
```
5. 编写组件
在src目录下新建一个App.vue文件,用于编写组件:
```
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default {
data () {
return {
message: 'Hello Vue!'
}
}
}
</script>
```
6. 编写入口文件
在src目录下新建一个main.js文件,用于编写入口文件:
```
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
```
7. 运行项目
在命令行中执行以下命令启动开发服务器:
```
npm run dev
```
然后在浏览器中访问http://localhost:8080,可以看到页面上显示了“Hello Vue!”。至此,一个基本的vue项目已经成功搭建完成了。