初解vue脚手架vue

vue-cli 脚手架总结

> 这一篇只解读了vue支持的webpack打包机的使用。之后会单独说webpack。

vue-cli是什么？

vue-cli 是vue.js的脚手架，用于自动生成vue.js模板工程的。

记住哦：快速建立项目，快速立项！快速立项！快速立项！(重要的事情有说三遍！！！)

那么什么是脚手架呢？官方是这么说的：

“脚手架”是一种元编程的方法，用于构建基于数据库的应用。许多MVC框架都有运用这种思想。程序员编写一份specification（规格说明书），来描述怎样去使用数据库；而由（脚手架的）编译器来根据这份specification生成相应的代码，进行增、删、改、查数据库的操作。我们把这种模式称为"脚手架"，在脚手架上面去更高效的建造出强大的应用！

接下来我们来看一张图：

就像是建楼一样，先搭架子，再填充建筑材料，至于什么材料，你自已决定。是小平房，还是楼房，还是什么其它大建筑，这要看你搭架子的结构了。

可以使用 vue list 命令来查看所有的官方模板列表。

目前可用的模板包括：

• • browserify--全功能的Browserify + vueify，包括热加载，静态检测，单元测试
  • browserify-simple--一个简易的Browserify + vueify，以便于快速开始。
  • webpack--全功能的Webpack + vueify，包括热加载，静态检测，单元测试
  • webpack-simple--一个简易的Webpack + vueify，以便于快速开始。

webpack-simple 和 webpack 的区别在于webpack-simple 没有包括Eslint 检查功能等等功能，普通项目基本用webpack-simple 就足够了.

vue-cli怎么使用？
首先，列出来我们需要的东西：
1,node.js环境（npm包管理器）,node.js中的npm包管理器提供了vue.js的模块包文件，用install安装命令可以从网络上下载vue.js的包文件。

2,这一项不是必须的，如果npm下载模块包时，网络不好，可以用cnpm来下载我们要下的模块包。

国内使用 npm 速度很慢，你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

 npm install -g cnpm --registry=https://registry.npm.taobao.org
 npm config set registry https://registry.npm.taobao.org

这样就可以使用 cnpm 命令来安装模块了：

 cnpm install [name]

安装vue-cli之前，需要先安装了vue和webpack

npm install -g vue       //全局安装vue
npm install -g webpack   //全局安装webpack
npm install -g vue-cli   //全局安装vue-cli

注意：上面这些装过一次之后都不需要再安装了。

接下来就可以开始vue-cli的使用了。

vue init webpack myName  //生成项目名为myName的模板，这里的项目名myName随你写，当不写时，就是在当前目录下释放资源。回车，回车，回车，注意这里看下面的图片，键入n,表示不要这些限制
cd myName                //进入你创建的目录之后再进行下一步。
npm install              //初始化安装依赖,若npm下不动时可用淘宝镜像cnpm来安装，两者的资源基本一致，有时也互补。

这样子项目就安装完了。生成的项目下面的目录是这样的：

我是在桌面直接手动创建了webpack0这个文件夹，将资源释放到了这里的(我没写myName)。

然后在执行:  npm run dev

在浏览器打开http://localhost:8080，则可以看到欢迎页了

但是这个只能在本地跑（http://localhost:8080），要如何在我们自己的服务器上访问呢？此时需要执行

npm run build

会生成静态文件，在根目录的dist里，里面有个index.html，这是服务器访问的路径指定到这里就可以访问我们自己的项目了。但是我发现个问题就是生成
index.html里引用的css和js的引用路径不对，这时候就需要自己修改一下配置了。

进入config/index.js

在更改如图所示路径后，我们可以将生成的dist文件夹单独拿出来，在dist目录下运行：npm run dev  ,结果不出所料，我们也可以以服务器的形式开启（http://localhost:8080）

这个效果与在网络服务器上效果一致。