从无到有搭建Vue.js+webpack前端开发环境（三）

在上一篇文章中，我们对默认的初始化后的vue工程有了基本的了解，但仍存在很多不合理的地方，本篇内容就是修改这些默认的文件，让工程用起来更舒适。

config文件夹的修改

我们先从这里开始，很多工程运行后会自动的启动浏览器，而默认的工程不会。那是因为webpack的配置文件中的autoBrowserOpen字段设置为false了，所以我们只需要在index.js文件中将其设置为true。

config/index.js

static文件夹的修改

因为我们搭建的是模块化vue工程，所以不需要插入这种纯静态资源，因此这个文件夹可以删掉。如果要删掉，build/webpack.dev.conf.js和build/webpack.prod.conf.js也要一起更改，只需要将其中的CopyWebpackPlugin对象删除即可。

src文件夹的修改

我们把静态资源都存放在assets文件夹中，因此我们在这个文件夹中在添加子文件夹images用来存放图片，同样也可以添加video、audio等子文件夹。

我们再添加一个文件夹styles用来存放各种样式表，在这个文件夹下再建一个global.css作为全局样式表，等会儿我们再App.vue中引入这个样式表。如果有必要你也可以添加scss、less等子文件夹存放这些预处理文件。

index.html这个模板也可以放在src文件夹中，所以我们先建立一个template文件夹放模板文件，在这里面添加index.html文件。在以后的开发中如果需要改模板就可以直接在这里改，外面的index.html就可以删除了。当然，我们还需要在build/webpack.dev.conf.js和build/webpack.prod.conf.js中做一些修改。找到HtmlWebpackPlugin对象，并把template字段的内容改成index.html新位置，即src/template/index.html。两个文件都是如此。

build/webpack.dev.conf.js

然后，我们将components文件夹重命名为views，在这个文件夹内添加components文件夹存放组件。

在App.vue文件中引用之前的global.css。

src/App.vue

最后，我们删除router文件夹，新建一个router.js文件作为路由，内容和之前的一样。当然这样修改后也要同步更改main.js，更改router的位置即可。

src/main.js

现在已经完成了src文件夹的修改。

更改后的src

尝试运行一下。在命令行中输入

npm run dev

如果能够正常运行就说明我们搭建成功了。

到此为止，我们已经将工程改成自己顺手的样子。因为这样改动可以让我们在以后的开发中只需要关注src这个文件夹即可，使得开发更快捷、更高效。接下来几篇我会介绍如何引入axios、vuex、iview等模块。