从零开始搭建一个vue的脚手架（整合）

vue.js是现在一个很火的前端框架，官网描述其简单易用，灵活度高，性能好。本篇文章基于Windows系统

搭建vue项目主要分以下几步：

1.Node.js（Javascript运行环境）安装 
2.Vue.js安装 
3.脚手架搭建 

4.项目文件描述

1.Node.js安装（仅第一次部署时执行）

• 下载安装
• 测试

下载安装

点击下载: Node下载 根据自己电脑系统安装，一直点下一步即可

测试

Windows+R快捷键打开cmd窗口，输入node -v出现版本号，即安装成功！

2.Vue.js安装（仅第一次部署时执行）

使用NPM安装

—NPM: NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题

由于 NPM 安装速度慢（服务器在国外），这里使用淘宝的镜像及其命令 cnpm 
安装淘宝的镜像： 
打开cmd命令框，输入 
npm install -g cnpm –registry=https://registry.npm.taobao.org 
在命令框输入 
cnpm install vue 

好了，vue.js安装完毕

3.脚手架搭建

• Vue-cli安装
• 搭建测试

Vue-cli安装 
在cmd命令框输入 
cnpm install -g vue-cli

搭建测试 
1.在你的vue安装目录下（我的是E盘根目录）新建文件夹Vue

2.打开cmd命令窗口输入E:，进入E盘，然后输入cd E:\vue，进入E:\vue，最后输入vue list可以看到列出了可以使用的模板 

在命令框内键入 vue ,看到命令描述:

我们init命令安装 

vue init webpack pname(文件名，这里我以text为例)

• • ? Project description (A Vue.js project) vue-cli新建项目(项目描述)；
  • ? Author (xhdx <[email protected]>) ；[email protected](项目作者)；
  • ? Vue build 
❯ Runtime + Compiler: recommended for most users 
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere 
    这里选择Runtime + Compiler: recommended for most users；
  • ? Install vue-router? (Y/n) y 是否使用vue-router，这里根据需求选择；
  • ? Use ESLint to lint your code? (Y/n) n 是否使用ESLint，这里根据需求选择；
  • ? Pick an ESLint preset (Use arrow keys) 
❯ Standard (https://github.com/feross/standard) 
Airbnb (https://github.com/airbnb/javascript) none (configure it yourself) 这里选择Standard (https://github.com/feross/standard)
  • ? Setup unit tests with Karma + Mocha? (Y/n) n 是否需要单元测试，这里根据需求选择；
  • Setup e2e tests with Nightwatch? (Y/n) n是否需要e2e单元测试，这里根据需求选择；
  • Should we run `npm install` for you after the project has been created?项目创建后，我们应该为您运行“npm安装”吗，这里根据需求选择。

进入text文件夹 
cd text 
安装依赖 
cnpm install 
启动 
npm run dev

访问http://localhost:8080，出现如下页面： 

启动成功！

4.项目文件描述

至此，项目完成！