vue工程化

很多人在玩完了官方文档的小例子之后，又不知道如何下手了。所以我这边帮大家把断层补上。大家首先要把vue的基本语法都熟悉了，然后再来这边学习。

有了前面webpack的铺垫，我们直接从vue的工程化开始入手，这也是vue的真正玩法。

（1）首先，我们将盘符切到d盘，打开命令行，输入：

npm install vue-cli -g

这个vue-cli呢，是vue的脚手架工具，可以自动生成目录，跟express生成器差不多。

（2）安装完成后，生成一下工程，输入：

vue init webpack vue2

这时会出现一些提示，直接一路回车即可。

最后，如果出现如上的图示，就说明安装成功了。

我们看一下生成好的目录：

（3）安装列表

我们看到根目录下有个packge.json文件，打开瞧一瞧：

我们看到，需要安装的东西还真不少。慢慢装吧。输入命令：

cd vue2
npm install

慢慢等着吧，如果你玩过node，这个流程应该是相当熟悉了。

（4）好，经过漫长的等待，我们终于将物料全部安装完毕。然后呢，输入命令：

npm run dev

我们看到，命令行进入阻塞等待状态。

根据提示我们知道，8080端口已经被监听了。打开浏览器，输入http://localhost:8080,会看到这样的页面：

（5）目录结构

build：打包发布需要的文件。
config：存放配置文件。
src：开发目录。这个比较重要
    |---assets：资源目录。
    |---components：存放组件，都是.vue文件。
    |---router：路由文件。
    |---App.vue:入口组件。
    |---main.js:启动文件。
static：静态资源目录。可以放一些图片，字体之类。
index.html:首页入口文件。
packge.json:安装列表。

（4）打包输出文件目录

不知道大家注意到没有，貌似还少了个目录，是啥呢？

没错，就是dist打包输出的文件目录。这个目录其实是动态生成的，我们输入命令：

npm run build

然后就可以生成dist目录了，我们最后上线，也只是上这个dist目录即可。这个以后我们还会说

从package.json安装清单来看，这个脚手架还搭载了express。那是否意味着：我们的api接口也会在上面开发呢？其实不然，你想多了。

这个node环境，不过是方便前端调试打包的工具罢了。

我们一向秉承的原则是——前后端分离。为了降低日后项目的维护成本，还是彻底分开的好。

 

 

.