前端框架搭建-搭建vue环境(学习笔记）

1.安装git命令行工具:https://git-scm.com/

   下载之后会有三个工具：git cmd,git bash,git gui，后面创建vue项目要用到git bash，

    使用命令行工具，依次输入：node -v和npm -v，若能显示版本号，则说明安装成功。

    小记：git 是基于linux的工具，在一些场合下会比windows 下的cmd方便

2.安装node.js :https://nodejs.org/en/

   下载安装最新8.11.1LTS版本，安装过程，注意安装路径；其它均是点击next傻瓜式安装。

   小记：Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 npm，是全球最大的开源库生态系统<官网介绍>，了解更多node.js可以看看知乎上node.js是什么的讨论。

3.配置node.js环境

  a.配置npm命令安装全局模块的安装路径，默认情况下npm的全局模块安装路径设置在C盘下,这样会占用C盘空间，且不方便查看；

     配置步骤：1.首先在node.js的安装目录根目录下新建两个文件夹：node_global和node_cache(第二步cache配置用到)；

                      2.打开命令行工具，输入 npm config set prefix "刚刚新建的node_global文件夹路径”

                        如： npm config set prefix D:\Program Files\nodejs\node_global

                       注意prefix与路径间有空格，没有空格会配置失败

 b.配置缓存cache的路径；

       配置步骤：输入 npm config set cache "刚刚新建的node_cache文件夹路径“

 c.设置环境变量：

      设置步骤：1.系统变量中新增NODE-PATH，变量值：“node_gloabal路径/node_modules”；

                        2.用户变量中修改Path变量

输入：npm install express -g

      （这一步还存在疑问，查阅一些资料说安装成功后会显示下图1所示，而我安装后是图2，怀疑是不是npm版本问题）

图2，图片来源：https://www.cnblogs.com/zhouyu2017/p/6485265.html

图2

4.安装Vue cli

  vue cli是vue的脚手架工具。

  步骤：1.输入 nmp install -g vue-cli 

              （速度较慢，大多数资料推荐使用淘宝镜像：

                npm install -g cnpm --registry=https://registry.npm.taobao.org

                )

             2.输入vue -V查看版本，若显示版本号，则安装成功。

                （注意V是大写的）

5.新建vue项目

   首先在你要创建项目的文件夹下，打开git bash;(这个时候就体现git bash 的优势了，windows的cmd还要一层一层进来）

  步骤：1.输入： vue init webpack 项目名称

               如：vue init webpack firstvue

           (小记：在我的学习中，它是一个打包工具，打包脚本、样式、资源等等）

            2.按照提示依次输入相关参数，如图4

            这里只在install vue-routeh后输入yes

            

             图4

         （背景中的白色是 csdn水印,不要误解）

           3.输入这些后在底部会出现提示，按照提示操作即可运行vue，如图5

           

          图5

          4.检查效果

            执行npm run dev之后，会在最后显示一个地址：https://localhost:8080,如图5

 

              图5          （默认端口是8080.可能会出现其它应用占用）

         打开浏览器打开访问这个地址，若能出现下图（图6）结构的页面即vue正在运行：

          

                  图6    （    这里我把图片改成我女神了，哈哈哈)

6.编辑项目，基于webstorm

    若未安装webstorm,先安装.附破解方法：https://blog.csdn.net/voke_/article/details/76418116,测试可用。

    打开项目文件。如图7：

主要在src编辑自己的内容，这部分还未深入学习。

  参考：1.https://blog.csdn.net/wisewrong/article/details/55212684

             2.https://www.cnblogs.com/zhouyu2017/p/6485265.html

             3.http://nodejs.cn/

             4.https://www.zhihu.com/question/33578075

             5.https://blog.csdn.net/bruceyangjie/article/details/70168985

             6.https://www.webpackjs.com/

             7.https://baike.baidu.com/item/GIT/12647237?fr=aladdin

             文章中出现的链接不再重新列出。