从0到1开始搭建vue开发环境

1、安装nodejs环境

2、切换到vue项目的根目录

3、执行npm init,按着提示输入以下配置：

之后，在项目根目录下面会生成package.json文件。

4、安装webpack,webpack-cli : npm install --save-dev webpack webpack-cli，成功后，在package.json中会增加以下内容：

5、执行webpack init 命令,如有

等再次出现命令提示时，再次输入 webpack init ,按提示输入：

因为配置的the first module to enter the application 为./src/index，所以要在项目根目录下面建立一个src文件夹，之后再建一个index.js文件。

6、在package.json中增加一个npm脚本配置：

"build":"webpack --config ./webpack.dev.js"

之后输入命令:npm run build ,执行完毕后会在项目根目录下面生成dist目录以及对应的js文件

7、安装 html-webpack-plugin（将输出的js、css等文件打包到html文件中）,执行命令:npm install --save-dev html-webpack-plugin

在webpack.dev.js中增加 

因为HtmlWebpackPlugin中filename的配置为index.html，所以要在根目录下面添加index.html文件。之后，执行npm run build，可以发现打包输出的js文件会自动添加到dist目录下面的index.html文件中。

8、配置vue开发环境:

     1).安装 vue,vue-loader,vue-style-loader,vue-template-compiler

     2).修改webpack.dev.js：

        

     

最后，执行npm run build，重新构建。然后使用浏览器打开dist目录下面的index.html文件