webpack创建vue脚手架
时间: 2023-11-19 19:52:19 浏览: 92
基于webpack搭建vue2.0的脚手架项目
5星 · 资源好评率100%
Webpack可以用来构建Vue脚手架,以下是一些步骤:
1. 首先需要安装Node.js和npm,因为Vue CLI是基于Node.js的,所以需要先安装Node.js和npm。
2. 安装Vue CLI,可以使用以下命令进行安装:
```
npm install -g @vue/cli
```
3. 创建一个新的Vue项目,可以使用以下命令:
```
vue create my-project
```
4. 在创建项目时,可以选择手动配置,然后选择需要的配置,例如Babel、Router、Vuex等。
5. 安装Vue Loader和Vue Style Loader,可以使用以下命令进行安装:
```
npm install vue-loader vue-template-compiler vue-style-loader css-loader
```
6. 在webpack.config.js中配置Vue Loader和Vue Style Loader,例如:
```
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
]
}
```
7. 安装其他需要的插件,例如vue-router、vuex等。
8. 在main.js中引入Vue和其他需要的插件,例如:
```
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
```
9. 运行项目,可以使用以下命令进行运行:
```
npm run serve
```
运行后可以在浏览器中访问http://localhost:8080/来查看项目。
阅读全文