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环境，不过是方便前端调试打包的工具罢了。

咱们一贯秉承的原则是——先后端分离。为了下降往后项目的维护成本，仍是完全分开的好。

 

 

.