从零开始搭建一个vue.js的脚手架

在谷歌工做的时候，咱们要作不少界面的原型，要求快速上手，灵活运用，当时用的一些现有框架，好比angular，太笨重了——尤雨溪（Vue.js 做者）

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

---

公司的项目前端框架选择了vue，最近也一直在学习它，今天写一篇Vue-cli脚手架搭建的学习记录，之后忘记了再来查阅。那么如何从零开始要跑起一个vue.js项目？主要分如下几步：

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安装目录下（个人是C:\Users\dell）新建文件夹VueTest 
2.打开cmd命令窗口输入cd VueTest，进入C:\Users\dell\VueTest，输入vue list能够看到列出了可使用的模板 

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

咱们init命令安装 
vue init webpack test

安装选项选择本身须要的便可，其中ESLint为ES6的代码风格检查器， 
这时看到安装完模板后给出了用法（绿框内），而且路径C:\Users\dell\VueTest多了一个test文件

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

启动成功！

---

4.项目文件描述

打开项目文件夹，能够发现比以前多出来一个node_modules，点开发现是以前安装的依赖文件，那么其余文件夹都表明着什么？存放着什么呢？

这里，咱们用一个表格作简单描述：

行数	描述
一、2	webpack配置相关，好比在config中的index.js能够配置端口号，这里不作详细描述
3	安装的依赖代码库
4	项目中全部的源码在这里
5	第三方静态资源
6	经过这个文件将ES6编译成ES5的(有些浏览器不支持ES6)
7	编辑器的相关配置
8	忽略ES语法检查的目录文件
9	eslintrc相关配置，好比debug配置
10	git提交时忽略的文件目录
11	关于CSS转换的文件
12	项目入口文件
13	项目依赖文件、配置文件
14	项目描述文件

至此，咱们已经踏进了vue的大门！

(转)https://blog.csdn.net/qq_32347235/article/details/58134723