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即可

      Vue.js随笔一(Webpack + Vue.js开发准备,含VNM、NPM、Node、Webpack等相关工具)_第1张图片

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

         Vue.js随笔一(Webpack + Vue.js开发准备,含VNM、NPM、Node、Webpack等相关工具)_第2张图片

 

         Vue.js随笔一(Webpack + Vue.js开发准备,含VNM、NPM、Node、Webpack等相关工具)_第3张图片     

         Vue.js随笔一(Webpack + Vue.js开发准备,含VNM、NPM、Node、Webpack等相关工具)_第4张图片

         Vue.js随笔一(Webpack + Vue.js开发准备,含VNM、NPM、Node、Webpack等相关工具)_第5张图片

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

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

            Vue.js随笔一(Webpack + Vue.js开发准备,含VNM、NPM、Node、Webpack等相关工具)_第6张图片

            然后得到,点击“系统”

            Vue.js随笔一(Webpack + Vue.js开发准备,含VNM、NPM、Node、Webpack等相关工具)_第7张图片

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

            Vue.js随笔一(Webpack + Vue.js开发准备,含VNM、NPM、Node、Webpack等相关工具)_第8张图片

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

            Vue.js随笔一(Webpack + Vue.js开发准备,含VNM、NPM、Node、Webpack等相关工具)_第9张图片

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

             Vue.js随笔一(Webpack + Vue.js开发准备,含VNM、NPM、Node、Webpack等相关工具)_第10张图片

             Vue.js随笔一(Webpack + Vue.js开发准备,含VNM、NPM、Node、Webpack等相关工具)_第11张图片

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

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

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

                

 

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

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

       Vue.js随笔一(Webpack + Vue.js开发准备,含VNM、NPM、Node、Webpack等相关工具)_第12张图片

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

      

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

       

③安装git客户端

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

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

    Vue.js随笔一(Webpack + Vue.js开发准备,含VNM、NPM、Node、Webpack等相关工具)_第13张图片

    Vue.js随笔一(Webpack + Vue.js开发准备,含VNM、NPM、Node、Webpack等相关工具)_第14张图片

               Vue.js随笔一(Webpack + Vue.js开发准备,含VNM、NPM、Node、Webpack等相关工具)_第15张图片

               Vue.js随笔一(Webpack + Vue.js开发准备,含VNM、NPM、Node、Webpack等相关工具)_第16张图片

               Vue.js随笔一(Webpack + Vue.js开发准备,含VNM、NPM、Node、Webpack等相关工具)_第17张图片

               Vue.js随笔一(Webpack + Vue.js开发准备,含VNM、NPM、Node、Webpack等相关工具)_第18张图片

               Vue.js随笔一(Webpack + Vue.js开发准备,含VNM、NPM、Node、Webpack等相关工具)_第19张图片

               Vue.js随笔一(Webpack + Vue.js开发准备,含VNM、NPM、Node、Webpack等相关工具)_第20张图片

               3.打开Git Bash

             Vue.js随笔一(Webpack + Vue.js开发准备,含VNM、NPM、Node、Webpack等相关工具)_第21张图片

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

                        Vue.js随笔一(Webpack + Vue.js开发准备,含VNM、NPM、Node、Webpack等相关工具)_第22张图片

④再然后到了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 -gcnpm install webpack-cli -g,此时webpack就安装好了
    4.输入webpack -v,若显示版本号,则安装成功

    

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

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

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

     2.安装依赖:

       分别输入并执行指令cd my-projectcnpm install   

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

       输入并运行指令:npm run dev,结果如下

       Vue.js随笔一(Webpack + Vue.js开发准备,含VNM、NPM、Node、Webpack等相关工具)_第23张图片

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

       Vue.js随笔一(Webpack + Vue.js开发准备,含VNM、NPM、Node、Webpack等相关工具)_第24张图片

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

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

你可能感兴趣的:(Vue.js随笔一(Webpack + Vue.js开发准备,含VNM、NPM、Node、Webpack等相关工具))