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

太过爱你忘了你带给我的痛 2021-09-15 14:12 405阅读 0赞

# 本文章来自装载 https://blog.csdn.net/qq\_32347235/article/details/58134723 #

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

2017年02月27日 16:21:15

阅读数：8985

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

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

--------------------

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

1.Node.js（Javascript运行环境）安装   
2.Vue.js安装   
3.脚手架搭建   
4.项目文件描述

--------------------

## 1.Node.js安装 ##

*  下载安装
 *  测试

下载安装

点击下载: [Node下载][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][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可以看到列出了可以使用的模板   
![这里写图片描述][SouthEast]

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

![这里写图片描述][SouthEast 1]

我们init命令安装   
vue init webpack test

![这里写图片描述][SouthEast 2]

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

![这里写图片描述][SouthEast 3]

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

![这里写图片描述][SouthEast 4]

启动成功！

--------------------

## 4.项目文件描述 ##

打开项目文件夹，可以发现比之前多出来一个node\_modules，点开发现是之前安装的依赖文件，那么其他文件夹都代表着什么？存放着什么呢？

![这里写图片描述][SouthEast 5]

这里，我们用一个表格做简单描述：

<table style="width:852px;text-align:center;"> 
 <thead> 
  <tr> 
   <th style="margin:0px;vertical-align:middle;">行数</th> 
   <th align="center" style="margin:0px;vertical-align:middle;">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="margin:0px;vertical-align:middle;">1、2</td> 
   <td align="center" style="margin:0px;vertical-align:middle;">webpack配置相关，比如在config中的index.js可以配置端口号，这里不做详细描述</td> 
  </tr> 
  <tr> 
   <td style="margin:0px;vertical-align:middle;">3</td> 
   <td align="center" style="margin:0px;vertical-align:middle;">安装的依赖代码库</td> 
  </tr> 
  <tr> 
   <td style="margin:0px;vertical-align:middle;">4</td> 
   <td align="center" style="margin:0px;vertical-align:middle;">项目中所有的源码在这里</td> 
  </tr> 
  <tr> 
   <td style="margin:0px;vertical-align:middle;">5</td> 
   <td align="center" style="margin:0px;vertical-align:middle;">第三方静态资源</td> 
  </tr> 
  <tr> 
   <td style="margin:0px;vertical-align:middle;">6</td> 
   <td align="center" style="margin:0px;vertical-align:middle;">通过这个文件将ES6编译成ES5的(有些浏览器不支持ES6)</td> 
  </tr> 
  <tr> 
   <td style="margin:0px;vertical-align:middle;">7</td> 
   <td align="center" style="margin:0px;vertical-align:middle;">编辑器的相关配置</td> 
  </tr> 
  <tr> 
   <td style="margin:0px;vertical-align:middle;">8</td> 
   <td align="center" style="margin:0px;vertical-align:middle;">忽略ES语法检查的目录文件</td> 
  </tr> 
  <tr> 
   <td style="margin:0px;vertical-align:middle;">9</td> 
   <td align="center" style="margin:0px;vertical-align:middle;">eslintrc相关配置，比如debug配置</td> 
  </tr> 
  <tr> 
   <td style="margin:0px;vertical-align:middle;">10</td> 
   <td align="center" style="margin:0px;vertical-align:middle;">git提交时忽略的文件目录</td> 
  </tr> 
  <tr> 
   <td style="margin:0px;vertical-align:middle;">11</td> 
   <td align="center" style="margin:0px;vertical-align:middle;">关于CSS转换的文件</td> 
  </tr> 
  <tr> 
   <td style="margin:0px;vertical-align:middle;">12</td> 
   <td align="center" style="margin:0px;vertical-align:middle;">项目入口文件</td> 
  </tr> 
  <tr> 
   <td style="margin:0px;vertical-align:middle;">13</td> 
   <td align="center" style="margin:0px;vertical-align:middle;">项目依赖文件、配置文件</td> 
  </tr> 
  <tr> 
   <td style="margin:0px;vertical-align:middle;">14</td> 
   <td align="center" style="margin:0px;vertical-align:middle;">项目描述文件</td> 
  </tr> 
 </tbody> 
</table>

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

[Node]: https://nodejs.org/en/download/
[https_registry.npm.taobao.org]: https://registry.npm.taobao.org/
[SouthEast]: /images/20210813/5470eb8b87b842559c33431818e8764c.png
[SouthEast 1]: /images/20210813/69c2fe23f06240689b772da17615505c.png
[SouthEast 2]: /images/20210813/7d56dbb85fcb44399493b82de47a6ea9.png
[SouthEast 3]: /images/20210813/5b590529f98c4d2dbe95ed14cf8df2fb.png
[SouthEast 4]: /images/20210813/d45a5fce9cec4378832224b09352dee1.png
[SouthEast 5]: /images/20210813/52c55c40a29547fb8d67b36a76209b80.png