vue-cli的使用与解释

1、node.js安装

   https://nodejs.org/en/download/

   .msi方便以后npm的使用

 

 

2、安装vue-cli

  npm install -g vue-cli

3、使用vue-cli初始化项目

   vue init webpackmy-project

 

4、进到目录

cd my-project

5、安装依赖

  npm install

6、开始运行

 

7、访问

最近有许多 关于React项目工具的讨论，讨论了工具的使用问题 。如果你现在正在使用Vue.js，当你构建一个原型的时候，你所需要做的通常就是通过 <script> 把Vue.js引入进来，然后就完事了。但是真实情况往往不是这样的。当我们真正开发一个应用的时候，我们不可避免的会用到一大堆的工具，模块化、预处理器、热模块加载、代码校验和测试。这些工具对于一个需要长期维护的大型应用是必须的，但是项目初始化将会是让人痛苦的事情。这就是为什么我们做了 vue-cli ，让一个简单的命令行工具来帮助你快速的构建一个拥有强大构建能力的Vue.js项目。

仅仅为了初始化

下面是使用方法：

# 安装vue-clinpm install -g vue-cli# 使用vue-cli初始化项目vue init webpack my-project# 进入到目录cd my-project# 安装依赖npm install# 开始运行npm run dev

上面的这些命令会从 vuejs-templates 拉取模板并安装，然后用NPM安装依赖，最后你只需要用个NPM脚本启动就能开始开发了。

官方模板

这些官方的模板存在的意义在于提供强大的项目构建能力，以至于用户可以尽可能快速的进行开发。然而能否真正的发挥作用还在于你如何组织你的代码和你使用的其他库。

所有的官方模板都可以在 vuejs-templates organization 找到。如果有一个新的模板放在了这里，你可以直接就用 vue init <template-name> <project-name> 使用。你也可以运行 vue list 命令来看看现在有哪些官方模板是现在可用的。

目前有以下模板可供选择：

• browserify - 拥有高级功能的 Browserify + vueify 用于正式开发。

• browserify-simple - 拥有基础功能的 Browserify + vueify 用于快速原型开发。

• webpack - 拥有高级功能的 Webpack + vue-loader 用于正式开发。

• webpack-simple - 拥有基础功能的 Webpack + vue-loader 用于快速原型开发。

创建属于你的模板

如果你对官方的模板不感兴趣，你可以自己fork下来然后进行修改（或者重新写一个），然后用 vue-cli 来调用。因为 vue-cli 可以直接拉取 git源 ：

vue init username/repo my-project

无处不在的Vue组件

每一个模板都有自己的作用：基础版本用于快速构建原型，高级版本用于正式开发。这些模板有许多共同的功能，如都支持 *.vue 组件。这意味着任何第三方的Vue组件都可以随意使用，并且可以轻而易举的发布在NPM上 - 让我们创建出更多的可重用组件！