【Vue 学习笔记 一、Vue开发环境搭建】

  搭建Vue的开发环境

  1.首先安装Nodejs  (因为我的系统是Windows的所以就选择第一个了,这个看个人的开发环境)

    

    下载好后,然后一路确定,如果有更改安装目录的需求,就自己切换安装目录,由于是从网吧写的这篇博客,所以就无所谓了

    打开cmd  输入  node  --version

     

     出现nodejs 的版本就成功了 !  然后下一步安装  cnpm (安装这目的主要是使用淘宝的国内进行,安装的比较块)

      

       安装方法,从cmd 命令控制台中输入下面的命令

          

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

       出现下图就安装成功

       

        

      2.搭建vue的开发环境,安装vue的脚手架工具   ,输入下面的命令

      

cnpm install --global vue-cli 

    也可以使用命令  npm install --global vue-cli (这个也可以使用,但是我个人不太推荐,只要是下载的速度实在是太太太慢了)

    安装过程如下,速度飞起,安利给大家

    

    

    3.创建项目  必须cd 到对应的一个项目里面

         vue  init webpack vue-demo01

    

    可能安装过程很慢,请耐心等待。

    然后很不幸,,我安装成功了,没有出现错误,如下,

    

     运行上图的命令,但是我的报错了,没有启动  ,所以使用解决方案

    输入    

    cnpm install   

    

    安装成功后,然后在命令控制台中输入 

        cnpm run dev 

     

      貌似成功启动了,然后使用浏览器打开  localhsot:8080 看看 

      

      我使用的是Vs code  安装vue 的代码提示插件 

      

        然后修改其中的App.vue 代码,返回浏览器中查看

        

            修改成功!!!!    搭建成功!!!!

      但是还没有剧终!!!!

      

      还有另一种创建项目的方式  (推荐)

        vue init webpack-simple vuedemo02

        cd vuedem02

        (如果出现错误,或者启动不了执行下面的命令)

         cnpm install    或者 npm install

        

        然后执行启动  这次端口改成了  localhost:8081

         

          

      

          还有就是拿到一个项目,如果项目中没有node_modules 这个文件夹,可以使用 

          cnpm install 来安装   package.json 中项目所依赖的包

          

文件目录结构的简单说明

      

猜你喜欢

转载自www.cnblogs.com/kangxinxin/p/11261661.html