专栏首页梅花的学习记录【Vue 学习笔记 一、Vue开发环境搭建】

【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 中项目所依赖的包

文件目录结构的简单说明

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【Hadoop 分布式部署 一 :分布式部署准备虚拟机 】

    按照 下面的操作将IP配置为静态IP 这个静态的IP地址 是你自己设置的,只要符合虚拟机的IP段就可以。最后点击 Apply 需要root密码

    梅花
  • 《Java 面试问题 一 Spring 、SpringMVC 、Mybatis》

              Spring 是一款轻量级的 IOC (依赖反转) 和 APO (面向切面) 容器框架。(个人理解: 就是一个Bean对象容器,不用我们n...

    梅花
  • 《01-背包问题-点菜》

    梅花
  • 前后端分离之Vue项目构建测试打包发布

    写在开始 其实之前对前后端分离研究过一段时间,中间由于项目进度耽搁也就不了了之了,最近项目中部分使用到了Vue,恰逢前端小伙伴们居然说要使用这个东西,也许是前端...

    小柒2012
  • 前后端分离之Vue项目构建测试打包发布

    在用 Vue.js 构建大型应用时推荐使用 NPM 安装,NPM 能很好地和诸如 Webpack 或 Browserify 模块打包器配合使用。Vue.js 也...

    小柒2012
  • Mac安装vue.js开发环境

    本来以为在Mac上搭建vue.js的环境挺简单的,谁知遇到各种问题(可能是RP问题),网上解决的方法也寥寥无几,这里就记录下遇到的坑。

    DannyHoo
  • Vue2.0搭建脚手架流程

    Vue.js是一套构建用户界面的渐进式框架。 Vue 只关注视图层,采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和...

    小周sri的码农
  • 【Vue学习笔记】01Vue CLI 的使用与介绍

    韩旭051
  • 详解:37 text-align-last的案例

    用户7873631
  • iOS PerformSelector 的实现原理

    当调用 NSObject 的 performSelecter:afterDelay: 后,实际上其内部会创建一个 Timer 并添加到当前线程的 RunLoop...

    赵哥窟

扫码关注云+社区

领取腾讯云代金券