Vue：Vue2.0搭建脚手架

 

随着Vue.js愈来愈火爆，更多的项目都用到Vue进行开发，在实际的开发项目中如何搭建脚手架呢？今天就来跟你们分享一下如何使用vue-cli搭建脚手架。

1、安装node.js

一、进入官网https://nodejs.org/en/download/

根据电脑操做系统，选择相应版本的文件进行下载。

二、下载文件后双击进行安装

安装完成之后进入node.js的安装目录：D:\Program Files\nodejs\（这里是我本机安装的目录，其余机器目录可能不一样），你会发现里面自带了npm，直接用npm安装环境便可。

2、安装cnpm

1. 说明：npm(node package manager)是node.js的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）。
2. 使用npm安装插件：命令提示符执行 npm install <name>。
3. 选装cnpm。由于npm安装插件是从国外服务器下载，受网络影响大，可能会出现异常，若是npm的服务器在中国就行了，因而咱们乐于分享的淘宝团队干了这事。来自官网：“这事一个完整npmjs.org镜像，你能够用此代替官方版本（只读），同步频率目前为10分钟一次，尽可能保证与官方服务同步。”；　　
4. 安装命令：npm install -g cnpm --registry=https://registry.npm.taobao.org。
5. 查看版本：输入cnpm-v，能够查看当前cnpm的版本。

注意：安装cnpm的时候不是安装在node.js安装的地方，要在建立的项目目录下面安装。

3、安装vue-cli脚手架构建工具

vue-cli提供了一个官方命令行工具，能够用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟便可建立并启动一个带热重载、保存时静态检查以及可用于生成环境的构建配置的项目。

一、安装命令

命令：$ cnpm install vue-cli -g。以下图所示：

 

注意：g表示全局安装。

出现以下的界面表示安装完成：

 

二、检查是否安装成功

安装完成以后输入 vue -V（注意这里是大写的"V"），以下图所示，若是出现相应的版本号，则说明安装成功。

4、建立一个基于webpack模板的新项目

要建立项目，首先咱们要选定目录，而后在命令行中把目录转到选定的目录。可使用下面的命令：

$ vue init webpack my-app

注意：my-app为自定义的项目名称,自定义的项目名称中不能包含大写字母。

 

输入命令之后直接按回车执行：

运行初始化命令的时候会让用户输入几个基本的选项，如项目名称、描述、做者等信息。例如：

Project name (myvuedemo) ：项目名称，这里是myvuedemo。

Project description (A Vue.js project)：项目描述，这里是“个人第一个Vue项目”。

Author：做者。

Install vue-router? (Y/N)：是否安装Vue路由，也就是之后是spa(但页面应该须要的模块)。

Use ESLint to lint your code?（Y/N）：使用ESLint到你的代码。

Pick an ESLint preset (Use arrow keys)：选择一个预置ESLint（使用箭头键）。

Set up unit tests (Y/n) y：设置单元测试。

Setup e2e tests with Nightwatch? (Y/n) ：设置端到端测试。

5、运行项目

输入下面的命令：$ cnpm run dev。

 

运行成功之后，根据提示，在浏览器中输入http://localhost:8080,浏览器显示的页面以下：

注意：服务启动之后，就不能关闭了

到此为止，Vue.js的脚手架搭建完成。