Vue.js随笔一(Webpack + Vue.js开发准备，含VNM、NPM、Node、Webpack等相关工具)

想入门工具是必须的，这一章将向大家带来vue.js相关的程序安装步骤。

①首先你需要有一个NVM(一个非常好用的Node版本管理器)：

          1.NVM下载地址：https://github.com/coreybutler/nvm-windows/releases

             下载nvm-setup.zip即可

      

         2.安装过程(除了第二个需要手动选个安装目录其他的直接下一步就ok)：

         

 

              

         

         

         3.此时你需要检查环境变量是否自动配置：

            打开控制面板(也可以通过Win键+R+输入control+enter)，之后点击“系统和安全”

            

            然后得到，点击“系统”

            

            再然后，点击“高级系统设置”

           

            再然后，点击“环境变量”

            

            找到PATH这个东东，并点进去

             

             

             此时此刻如果你看到了%NVM_HOME%和%NVM_SYMLINK%两个变量的话就可以退出了，第三步作废，如果没有那么手动添加一下就好了哦

             4.此时NVM安装就告一段落了，然后以管理员身份打开命令提示行(cmd)：

                输入nvm list，如果出现版本号证明安装成功喽，如下图所示

                

 

②然后你需要安装node.js(注意：node.js里自带npm哦)

    1.首先，从Node.js官网(https://nodejs.org/en/)下载对应平台的安装程序，网速慢的童鞋请移步国内镜像,然后直接安装就好

       

      2.这之后在命令提示行(cmd)中，输入node -v，如果显示如下，则安装成功

      

    3.此时输入npm -v，你会发现显示出了版本号，npm也有了，美滋滋

       

③安装git客户端

     1.首先去官网下载Git Bash(https://gitforwindows.org/)下载即可

    2.这里不多说了，基本上是一路下一步，除了第三步建议选Notepad++

    

    

               

               

               

               

               

               

               3.打开Git Bash

             

             注意：如果想切换路径比如到D:\workspace\happy_book_Vue.js,则输入如下指令即可

                        

④再然后到了Webpack的安装，这个是重中之重，也是最容易出错的，一定要细心看

     由于npm直接安装webpack所访问的网址贼慢，所以感谢淘宝提供的一个cnpm的镜像，使得安装成功

    1.先安装这个镜像，在cmd中输入指令npm install -g cnpm --registry=https://registry.npm.taobao.org

    2.安装vue，输入命令全局安装：npm install vue-cli -g

    3.然后分别输入并执行cnpm install webpack -g 和cnpm install webpack-cli -g，此时webpack就安装好了
    4.输入webpack -v，若显示版本号，则安装成功

    

⑤最后让我们来搭建开发环境

     1.创建一个基于Webpack模板的新项目：

       在cmd中输入命令：vue init webpack my-project,执行

     2.安装依赖：

       分别输入并执行指令cd my-project和cnpm install   

     3.在本地一默认端口来运行：

       输入并运行指令：npm run dev，结果如下

       

       4.打开浏览器输入http：//localhost:8081,如果如下则为成功

       

好了Webpack+Vue.js开发准备工作到这里就做好了，接下来你就可以随心所欲啦，哈哈哈哈

本文章参考过的网站：https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143450141843488beddae2a1044cab5acb5125baf0882000