本文指导你如何通过npm安装Vue及其相关依赖，包括vue-loader、style-loader等，并构建基础Vue应用，同时介绍Webpack配置要点。一步步教你创建一个简单的Vue项目，适合初学者快速上手。
安装
npm install --save vue
// 安装vue
npm install --save-dev vue-loader
// 加载vue文件
npm install --save-dev vue-style-loader
// 加载vue文件的样式
npm install --save-dev vue-template-compiler
// 将模板编译成render函数
npm install --save-dev vue-hot-reload-api
// 热更新
npm i vue-loader vue-style-loader vue-template-compiler vue-hot-reload-api -D
//vue依赖 安装
npm i vue -S
//vue安装基础vue结构
src/main.js
// Vue app的启动过程
import Vue from 'vue';
import App from './App.vue';
new Vue({
render:h=>h(App),
}).$mount('#app')src/App.vue
<template>
<div>
<h1>你好app</h1>
<p>{{msg}}</p>
<input type="text" v-model="msg"> <br>
<button @click="num++">{{num}}</button>
</div>
</template>
<script>
export default{
data(){
return {
msg:"自己搭建一个脚手架",
num:1
}
}
}
</script>
<style>
</style>
public/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue模板</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
webpack.config.js
导入插件
const VueLoaderPlugin = require('vue-loader/lib/plugin');
// 加载vue loader 插件使用插件
new VueLoaderPlugin()使用loader
{
test:/\.vue/,
loader: 'vue-loader',
options: {
loaders:{
css:[miniCssExtractPlugin.loader,,'css-loader']
}
}
},总结：
写个webpack 配置文件
vue-loader 加载.vue文件
vue-style-loader 加载vue文件的css
vue-template-compiler 编译.vue模板
vue-hot-reload-module 热更新
2509
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
