想要创建vue项目有两种方式，一种是使用vue官方提供的脚手架vue-cli，这种方式比较简单，今天我们要说的是第二种方式：使用webpack+vue手动创建vue项目。
1.创建一个webpack_vue_demo文件夹作为vue项目的根目录
2.打开命令行窗口切换到webpack_vue_demo目录下执行npm init -y命令初始化项目
3.执行npm install安装依赖包
4.创建项目目录结构
5.执行下面的命令安装相关的包
//安装vue和vue-loader
npm install vue vue-loader -D
//安装webpack相关包
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
//安装vue模版解析器
npm install vue-template-compiler
//安装style-loader和css-loader
npm install style-loader css-loader --save-dev
6.在webpack.config.dev.js文件中加入如下代码：
const path = require("path");
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode:"development",
entry:"./src/main.js",
output: {
path: path.join(__dirname,"dist"),
filename: "bundle.js"
},
module: {
rules:[
{ test:/\.css$/, use: ["style-loader", "css-loader"] },
{ test: /\.vue$/, use: ["vue-loader"] }
]
},
plugins: [ new VueLoaderPlugin(), new HtmlWebpackPlugin({ template:'./template.html' }) ]
}
7.在package.json文件中的sctipts项中加入下面代码：
"dev": "webpack-dev-server --progress --config webpack.config.dev.js --open --hot"
8. main.js的代码如下：
import Vue from 'vue'
import App from './App.vue'
new Vue({
el:"#app",
render:h=>h(App)
})
9.App.vue中的代码如下：
<template>
<div>Hello Vue</div>
</template>
10.template.html文件中加入<div id="app"></div>作为渲染vue应用的容器
最后，在命令行中执行npm run dev命令即可运行vue项目并实现了热更新
