vue 项目 -- 从 vue-cli 开始

从 vue-cli 开始

搭建一个 vue 项目最简单的方式就是使用官方的脚手架工具，他提供了现代前端工作流的构建设置，只需要几分钟时间就可以运行带有 热更新 Eslint 打包 功能的项目。

vue-cli 的安装比较简单，基本上跟着官网的步骤就可以

安装

前提条件： Node.js 版本在 6.x 以上， npm 版本在 3 以上， 并且要已经安装了 git

npm install -g vue-cli

用法

vue init <template-name> <product-name>

例子：

vue init webpack my-project

上面的命令将会从 vuejs-template/webpack 上面拉取 基于 webpack 配置的 vue 模版。

vue-cli 官方提供为 vue 应用几种零配置的开发模版，这些模版里自动生成了应用的目录、初始的代码、项目的配置，能够让用户更快的搭建 vue 项目。

当前官方提供的模版包括：
webpack 功能齐全的webpack + vue-loader 的设置、热重载、eslint、test 和 css 提取。
webpack-simple 一个快速设置简单的 webpack + vue-loader原型的模版。
browserify 功能齐全的 browserify + ‘vueify’设置与热重负荷，linting和单元测试。
browserify-simple 快速设置简单的 browserify + ‘vueify’ 原型。
pwa 基于webpack的vue-cli 的单页面模版。
simple 对 html 的简单 vue 配置 。

同时也是支持自定义模版的，夜里就不赘述了，以后有时间研究一下这个。

运行

cd project-name 
npm run dev

在之前的版本，项目初始化之后还需要进入目录运行 npm install 安装这种以来，现在 在 vue init 的时候已经为我们安装好了各种依赖