vue.js环境配置--vue-cli

  这两天学习vue.js,由于第一次学习类似框架,所以遇到了配置环境的一些问题 ,经过各种尝试终于解决

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

说明:  本文主要介绍vue-cli 的安装

             对于webpack 我尝试了几次 没有安装成功 所以 改为了vue.js官网中介绍的vue-cli

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


第一步 

         1. 安装 npm

                    建议 可以去node官网下载安装node  只要安装好node就自带安装好了npm  node安装非常简单 一路下一步就可以了  点击打开链接

                    ps: 如果你是window系统 还需要下载安装 git bash    点击打开链接

         2. 打开 git bash

                  1. 检查node 和 npm 是否安装成功

                           输入 node -v 

                           vue.js环境配置--vue-cli_第1张图片

                         输入 npm -v

                                

                   2. 安装 vue

                               //采用全局安装

                                  npm install -g vue-cli

                             ps:由于需要访问国外网站所以时间可能比较长

                             安装完成后输入  vue

                                vue.js环境配置--vue-cli_第2张图片

                                 

               3.创建一个基于 ‘webpack’模板的新项目

                           vue  init webpack  first-project                           //  webpack方法打包  创建一个新文件 first - project 

                          ps: 在输入上述命令时 可以先改变当前位置 将文件创建到你需要的地方

                                          先输入  cd

                                           然后输入 cd f:    

                                          再输入  cd  web/vue                     即进入了f盘的web文件夹里的vue文件夹里    最终生成的first -project文件夹就在vue文件夹内

                         运行指令后 会要让你确定项目的一些配置

                               project name    直接回车

                               descriptions     输入描述你项目的文字 英文

                             author      输入作者名字 随便填

                            后面出现几个要你输入(y/n)的指令  全部输入n                      

                            最后剩下的如果出现全部回车   最后就创建成功了

                         我们 可以打开vue 里面就会出现 创建的文件

                           也可以输入命令   cd   first-project  回车 输入  ls

                              vue.js环境配置--vue-cli_第3张图片

                         则会出现文件内的一些内容

         4  安装依赖     

                          直接安装在first-project 下

                          npm    install  

                           安装后文件里出现了 node-modules 文件

        5 运行  npm run dev

                  成功后会出现一个监听端口  http://localhost:8080     访问这个就可以看到vue.js的欢迎界面


     6  至此安装完成 

              ps; 由于npm 访问速度太慢 所以你可以安装淘宝的镜像 cnpm  具体如何安装请自行百度       点击打开链接


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

本文参考自网上各种安装方法     如有侵权请告知

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

                            

                             

                    

                           







你可能感兴趣的:(vue.js学习笔记)