工具：hbuilderx
建立空项目：
在终端输入指令：
这样就会生成一个json文件：
这一块相当于一个前端模块化的配置文件。
接下来我们要做一些常见的npm指令:
我们会使用npm去下载很多的文件，比如我们可以去下载javascript,jquery等：
npm install 文件类型名 -S
我们就多了一个这个文件。
我们可以看到这里有一个dependenices依赖，我们这样就导入了jquery依赖，我们的项目中就可以去使用jquery了。
我们可以看到我们之前的json文件里也多了一个jquery依赖。
这样我们webpack模块化项目就初步形成了，但是webpack其实我们还没有。
只是用npm去拉取了一些工具和配置信息。
我们可以在模型组件中看到jquery.
我们多了vue。
我们也可以看到我们引入的vue.js。
我们现在就可以使用vue了。
我们也可以把router路由加进来：
我们去建立一个index.html文件。
在我们的模块化中，我们每一个html文件都必须要配有一个js文件：
我们在js文件中写个弹窗
我们肯定可以在html中去引用这个js文件：
但是目前还没有使用到模块化管理。
我们现在来去安装一下我们的webpack:
这样我们就下载好了我们的webpack。
我们的-g就是全局的在我们的电脑上安装好了webpack了。
我们在整个项目里创建一个这样的js文件，我们去打包一些模型文件。
写出固定配置代码。
我们把原来script里的删掉，去写我们新的，这行代码是为了让我们以后可以使用打包的webpack工具。
我们不光要下载cli还有下载webpack。
我们不分着安装了，我们一起安装了，不然速度太慢:
我们有了webpack就去把我们的dev运行一下：
在终端写完这个命令后，我们发现：
我们看到了这个新的js文件，我们把我们的index.js文件引入到了我们的main.js里了。
我们现在的主页还在报着错误。
我们已经把index.js引到了main.js里了，所以我们在主页中直接就把main.js引进来，不需要引入index.js了。
我们发现目前已经没有错误了。
我们这么写是没有效果的，我们的模块化，必须要把js的内容写在函数里。
但是我们现在是之前的项目，我们每次写完新的代码想要运行要去重新run dev一次：
运行成功了。
我们创建vue项目的话会自动运行，所以目前比较麻烦还是无所谓的。
我们目前已经把jquery引进去了，我们一会看看能不能把vue也导进去使用一下。
我们正常向以前一样去使用vue，我们发现出现了错误：
他说没有找到我们的挂载区域。
原因是什么呢？
是因为我们在script标签里就已经加载了js文件，就运行了这段vue代码，导致我们再到div里已经找不到vue实例了。所以我们要改一下我们写的script标签的位置，不应该在head标签内。这是一个很经典的问题。
改动之后运行成功了，所以现在我们也可以使用vue在模块化项目中了。
我们也可以使用之前学过的所有vue里的东西和语法：
我们只需要正常会vue的语法就可以了，然后把它们抽出去，我们正常写项目是不会把vue的代码都写到html页面中去的。
真正做项目的时候会有各种各样的组件。
我们今天只是初步体会一下vue在模块化中的使用。
