入门级---Vue脚手架(vue-cli)搭建过程---详版

我觉得---对于初学者来说，首先应该是先知道为什么要搭建脚手架vue-cli，然后再进行搭建...

  什么是脚手架，搭建的目的是什么？ 

        在工地上，脚手架是帮助工人作业搭建的架子，哈哈...

        所以在这里， vue-cli  就是脚手架，里面有一套vue结构配置，它可以帮助我们写好vue.js代码快速构建项目的工具。

        vue-cli可以做什么：

            1，目录结构
                2，本地调试
                3，代码部署
                4，热更新
                5，单元测试（ESlint）

        目的：节省时间，快速开启项目。

  搭建步骤  

这里是简洁版：https：//blog.youkuaiyun.com/webkris/article/details/80023552

     第一步，环境搭建和准备工具   

   1.--------------安装的node.js中（运行环境）----------------

    从node.js官网下载并安装node，安装过程傻瓜式点击“下一步”就可以了。安装完成之后，打开命令行工具（win + r，然后输入cmd），输入node -v，如下图，如果出现相应的安装版本号，说明安装成功。

        

   2 .-----------安装淘宝镜像（为了安装cnpm）------------------

   打开命令行输入   npm install -g cnpm -registry = https：//registry.npm.taobao.org 

   注意我们要用cnpm，因为用的npm的服务器是外国，安装速度很慢，且npm命令执行效率会比较慢。
下面是安装进度，需要有网，速度也是你的网速决定的。

      

安装完成之后，cnpm -v如下图，出现相应的版本号，则说明安装成功;如果安装不成功，检查是否报错，如果没有报错，但是cnpm -v时显示“ 不是内部或外部命令，... ......... “，那就去检查windows环境配置，把vue.cmd文件的路径名配置到路径后面，如下图：

配置好之后，重启cmd，然后重新安装cnpm，检测cnpm -v，出现下图。

3 .--------------- 安装的WebPack（模块加载器兼打包工具）----------------

在命令行输入：cnpm install webpack -g

安装完成之后输入  webpack -v，如下图，如果出现相应的版本号，则说明安装成功。

4 .-------------- 安装vue-cli脚手架（一套配置服务）----------------------- -

在命令行输入：npm install vue-cli -g

完成之后，vue -V这里V大写，查看是否安装成功，如下图，出现相应的版本号，则说明安装成功。

第二步，使用vue-cli来构建项目

   1. 新建文件夹

    在硬盘上找到一个文件夹放工程用的。可以在D / E ...盘，文件夹名字尽量语义化就好，如：app等。在哪个盘里就转到哪个盘：D盘就是   d ：

     然后指定到相关目录：cd目录路径（把刚才建好的文件名，如app 拖拽到命令行

    显示如下图：

2. 创建项目

    现在可以在你的文件夹如   应用程序   中创建项目：这里项目名不能使用大写和中文，只能是小写字母。

    在命令行输入：vue init webpack my-vue  注意这里的“ my-vue ”是项目的名称，可以随便的起名，依然语义化就好。

    创建项目过程中，看问号那里，我改了作者是我的名字kris，然后一直按“enter”，选择安装的部分，只有安装vue-router选择安装按'y'，其他都按'n';看我的图，英语不错的可以读读那些，看不懂的就按我说的做哈，总之不影响你后面创建项目〜

现在打开文件夹app，可以看到多了一个文件my-vue，这是刚创建的项目名称。

3. 进入创建的项目目录 ， 在命令行的CD把 我的VUE  拖拖到CD后面

4. 安装项目依赖 ： npm install  ，这我测试过npm install不会很慢，用了90多秒，最好不要从国内镜像cnpm安装（会导致后面缺了很多依赖库），但是但是如果真的安装很慢也没成功那就   ctrl + c   终止运行，继续用： cnpm install。

5. 启动项目，输入：npm run dev。脚手架跑起来之后，会默认打开8080端口，系统如果自动跳转到该网页，就说明我们的脚手架安装已经完了，然后就可以在脚手架里面填写我们的项目了。

      

http：//localhost：8080                默认服务启动的是本地的8080端口，所以请确保你的8080端口不被别的程序所占用。

复制地址到浏览器，显示的是这个页面

首次安装全步骤，如果已经安装，就直接执行

（1）d：

（2）cd:路径名

（3）npm install

  (4)  npm run dev

现在我们的脚手架就搭建完成啦〜如果有不严谨的地方或者过程中出现小问题的可以给我留言哦！