webpack构建Vue2.0项目初体验

想着这几天的体验，刚开始捣鼓着webpack构建Vue2.0的项目，真的是一片心酸啊～～因为看着网上诸多关于webpack + vue的教程，这些教程大多数都是一开始就介绍一大堆相关的配置，对于刚入门vue的新手小白们无疑是十分痛苦的。【个人建议，也是我自己比较有效的方法，对于这些相关的配置，你可以浏览，记住作用是什么，但不要先去深究其中，可以在项目中深入了解。】

本文前提准备：有 vue 基础，搭配好 nodejs、webpack、vue-cli 环境，相关的安装教程网上的都大同小异，就不啰嗦了，直接从 webpack 构建项目开始。

初始化创建一个 Vue 项目

切换到目标文件夹。
执行命令（这里的项目名为：project）。

sudo init webpack 项目名称

注意：项目名称不能包含有大写字母，不然会报错。

image1.png

输入相关的信息和依赖文件选项，这些根据你自己的需要，完成后开始构建你的项目。

image2.png

项目构建完成，切换到目标文件夹，会看到已经生成了一大堆文件。

image3.png

在目标文件夹下，安装相关的依赖，直到完成。

sudo npm install

image4.png

相关依赖安装完成后，启动服务器，启动项目。

sudo npm run dev

image5.png

image6.png

接下来，你就可以在浏览器中在服务器中访问你的 localhost，注意端口号要一样。

image7.png

以上，就是通过webpack构建Vue项目的过程。接下来，简单地总结相关的项目文件目录。

文件目录

先来看下目录结构：

image8.png

build：webpack 的相关配置，即：构建脚本目录。【这里存放我们最后的代码】
config：路径端口值的相关配置，即：项目配置。【一般情况下，默认配置就好了】
node_modules：依赖模块。【这里有贼多文件。。不管】
src：组件和入口文件，即：项目开发的目录。
static：静态资源，不会被 wabpack 构建。【主要存放字体图片图标等】

上面这几个就是根目录下面的五个子文件夹，主要的作用上面也介绍了。下面继续了解下这些文件夹里面的主要文件。

build（构建脚本目录）

build 文件夹下的相关文件如下：

image9.png

build.js：生产环境构建。
check-version.js：版本验证工具。
utils.js：构建相关工具。
vue-loader.conf.js：vue-loader 的相关配置（vue-loader：将.vue文件转换成 webpack 包，并且和整个打包过程组合起来）。
webpack.base.conf.js：wabpack 基础配置。
webpack.dev.conf.js：wabpack 开发环境配置。
webpack.prod.conf.js：wabpack 生产环境配置。

config（项目配置）

config 文件夹下的相关文件如下：

image10.png

dev.env.js：开发环境的变量。
pro.env.js：生产环境的变量。
index.js：项目配置文件。

尤其要重视的是index.js这个文件。

node_modules（依赖模块）

这个文件夹下的子文件夹贼多～主要是存放相关的依赖文件。。不多说～

static（静态资源）

主要存放字体、图片和图标等。

src（组件和入口文件）【放在最后总结，表示非常非常重要～】

src 文件夹下的相关文件如下：

image11.png

assets：资源目录。
components：存放相关的组件文件，是 .vue 文件。
router：路由文件，主要存放的是相关的路由代码。
App.vue：项目入口文件，也就是根组件。（你怎么实现你的页面，引进外部相关模块后，就在这里进行）。
main.js：项目的核心文件。即：引进模块，实例化 Vue 对象等。

根目录下的其他重要文件

index.html：首页入口文件。
package.json：项目配置文件，重要。【在项目中慢慢体会！】

总结了这么多个文件及其作用，来看看下简单的实现例子。

简单例子

需求：实现简单的路由切换。

将原本的页面去掉。
添加两个组件，用于路由的渲染。

image12.png

实现两个组件文件。

// page1.vue






// page2.vue

在index.js文件中添加路由信息。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 引进组件
import page1 from '@/components/page1'
import page2 from '@/components/page2'

Vue.use(Router)

export default new Router({
  routes: [{
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {   // page1路由信息
      path: '/page1',
      name: 'page1',
      component: page1
    },
    {   // page2路由信息
      path: '/page2',
      name: 'page2',
      component: page2
    },
  ]
})

最后，在 app.vue 文件中添加我们想要的页面布局。

实现的效果如下：

效果.gif