专栏首页电光石火vue开发环境搭建

vue开发环境搭建

首先,列出来我们需要的东西:  node.js环境(npm包管理器) vue-cli 脚手架构建工具

cnpm npm的淘宝镜像

vue的安装 1.vue的安装依赖于node.js,所以先安装过node.js。从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装)安装完成后可进入cmd编辑器,输入命令 node -v进行查看,如果成功安装node会出现 v 6.9.1

2.安装cnpm 在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org 然后等待,安装完成后可进入cmd编辑器,输入命令 cnpm -v进行查看,如已成功安装node会出现 v 6.9.1如果想进一步了解cnpm的,查看淘宝npm镜像官网 后,就可以开始vue的安装了。这里提一下淘宝镜像,用淘宝镜像的cnpm来代替npm的安装,速度会快很多。如果使用淘宝镜像安装就输入命令行 $ cnpm install -g vue-cli进行安装,如果没有安装淘宝镜像依旧用$ npm install -g vue-cli安装: 输入命令 cnpm -V 出现4.4.0代表淘宝镜像安装成功 输入命令 vue -V 出现2.5.0代表VUE安装成功 3.可以开始建立一个vue项目啦 #全局安装 vue-cli npm install --global vue-cli #创建一个基于webpack模板的项目 文件夹名myproject vue init webpack myproject #安装依赖 cd myproject npm install npm run dev 4.输入http:lobalhost:8080出现以下页面就代表成功喽 5.如果想访问项目中的某一个页面,请找到router这个js

输入http://localhost:8080/#/login便可访问想要访问的页面

如果是下载的项目有依赖包

安装项目所需的依赖 要安装依赖包,首先cd到项目文件夹(firstVue文件夹),然后运行命令 cnpm install ,等待安装。 安装完成之后,会在我们的项目目录firstVue文件夹中多出一个node_modules文件夹,这里边就是我们项目需要的依赖包资源。

安装完依赖包之后,就可以运行整个项目了。

运行项目 在项目目录中,运行命令 npm run dev ,会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。 这里简单介绍下 npm run dev 命令,其中的“run”对应的是package.json文件中,scripts字段中的dev,也就是 node build/dev-server.js命令的一个快捷方式。 项目运行成功后,浏览器会自动打开localhost:8080(如果浏览器没有自动打开,可以手动输入)。

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue开发环境搭建

    首先,列出来我们需要的东西:  node.js环境(npm包管理器) vue-cli 脚手架构建工具 cnpm npm的淘宝镜像 vue的安装 1.vu...

    似水的流年
  • vue的seo问题

    参考 https://www.npmjs.com/package/prerender-spa-plugin https://www.npmjs.com/pack...

    似水的流年
  • 修复Long类型太长,而Java序列化JSON丢失精度问题的方法

    Java序列化JSON时long型数值,会出现精度丢失的问题。  原因:  java中得long能表示的范围比js中number大,也就意味着部分数值在js中存...

    似水的流年
  • vue开发环境搭建

    首先,列出来我们需要的东西:  node.js环境(npm包管理器) vue-cli 脚手架构建工具 cnpm npm的淘宝镜像 vue的安装 1.vu...

    似水的流年
  • Vue2.0搭建脚手架流程

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

    小周sri的码农
  • 使用Vue-cli搭建项目教程

    大象无痕
  • vue.js学习(02)

    今天将vue.js官网的所有看完了,一共15个视频,看完也就差不多一个小时,便将所有vue.js的基本用法都看完了。基本可以满足基础知识的学习。

    efonfighting
  • Vue + TypeScript 踩坑总结

    vue 和 TypeScript 结合的情况下,很多写法和我们平时的写法都不太一样,这里总结我项目开发过程中遇到的问题和问题的解决方案 有些问题可能还没解决,...

    xing.org1^
  • 前后端分离之Vue项目构建测试打包发布

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

    小柒2012
  • Android Button 单击事件

    方法一:在XML文件中指定 单击事件函数 <Button             android:id="@+id/button1"             a...

    Java中文社群_老王

扫码关注云+社区

领取腾讯云代金券