Vue脚手架的搭建 时间：2017-12-29     来源：web前端开发技术分享

最近有很多人在问我们技术老师这样一个问题——Vue脚手架的搭建，今天为了能够更好的解决大家的问题，小编请我们的技术老师将Vue脚手架的搭建汇总出一篇文章，现在提供给大家，大家以后再也不用因为这类问题烦恼了。

(1) 安装之前需要检查是否已经安装NodeJS的环境

可以使用node -v检查，且需要保证安装4.0版本以上的nodejs环境

执行命令node -v 安装的版本为 v6.9.4

如果没有安装则执行下面的步骤：node.js安装过程如下：

node.js相关的网站//www.cnodejs.org/

可以发现node.js自带了npm，我们可以直接使用npm安装其他的相关环境即可。

安装命令为 ： npm install 组件名称

默认情况下，组件都是安装在C:\Program Files\nodejs\node_modules文件夹下的

但是通常情况下，我们需要安装一个全局的组件，才能够使用

这时安装命令为：npm install 组件名称 -g

(2)安装vue-cli

vue-cli 是用 node 编写的命令行工具，我们需要进行全局安装。打开命令行工具，输入指令：

$ npm install -g vue-cli

也可以安装一个npm的淘宝镜像，这样安装快一些

安装命令如下：

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

安装完成以后，执行如下命令：

$ vue --version

得到安装的vue版本是2.8.1

(3)基本使用

初始化项目

定位到创建项目的目录下

执行命令：vue init 模板类型 项目名称

模板类型可以使用vue list指令查看

项目名称可以自己定义vue

生成项目模板的命令格式为

$ vue init t<emplate-name>< project-name>

<template-name>：模板名，比如 webpack, simple, browserify

<project-name>： 本地文件夹名称

我们可以使用 vue-cli 来快速生成一个基于 Webpack 构建的项目。打开命令行工具，输入如下命令：

$ vue init webpack my-project

所有模板默认安装的是 Vue 2.x 版本，如果需要安装 1.x 版本，需要输入如下指令：$ vue init webpack#1.0 my-project

有一系列交互问题，同意按 y，不同意按 n。

初始化项目之后，查看项目目录如下：

安装命令行给出的提示，我们依次输入如下指令：

$ cd my-project

$ npm install

安装过程如下：

安装完毕以后会在对应的目录下生成如下文件，多了一个node-module文件，里面是依赖的node工具包：

下面对上图目录做一个简要的说明

现在启动项目，输入如下命令：

$ npm run dev

注释：

1、vue init webpack blog

填写：Target directory exists. Continue? (Y/n) 直接回车默认(然后会下载 vue2.0模板，这里可能需要连代理)

Project name (blog-website) 直接回车默认

Project description (A Vue.js project) 直接回车默认

Author 直接回车默认

Use ESLint to lint your code? n

pick an eslint preset. 默认Standard

setup unit tests with karma + mocha?No(单元测试不需要)

setup e2e tests with Nightwatch?No(单元测试不需要)

2、cd blog

3、npm install

4、npm install vue-router vue-resource -save

5、npm run dev(启动项目)

6、npm run build(发布项目)