教你手动构建一个vue项目

首先要明白vue项目的基本目录结构，如下：

1. dist

2. src

     2.1 index.html

     2.2 index.js

     2.3 App.vue

     2.4 router.js

3. webpack.config.js

4. .babelrc

 

以上是基本目录，首先应该初始化目录，使用 npm init -y 初始化目录，会生成 package.json 这个文件，这个文件很关键

步骤：

1. 下载 webpack 

cnpm i webpack webpack-cli --save

2. 下载 实时监控代码修改的插件 webpack-dev-server

cnpm i webpack-dev-server --save

3. 然后在 package.json 里的 scritps 里添加指令："dev":"webpack-dev-server --open --port 3000 --hot"

添加热更新

4. 可以让 html 文件存到内存里面，因此要下载插件 html-webpack-plugin

下载之后，在 webpack.config.js 文件里设置

首先引入 html-webpack-plugin 插件

const htmlWebpackPlugin = require("html-webpack-plugin")

然后在 webpa