vue环境搭建的简单总结

Vue环境搭建的简单总结

构成:  Node.js环境  cnpm npm的淘宝镜像   Veu cli 手脚架构建工具

安装node.js环境

安装node.js方法步骤https://jingyan.baidu.com/article/b0b63dbfca599a4a483070a5.html;

安装cnpm

有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所以需要npm的国内镜像---cnpm

在命令行中输入npminstall-gcnpm--registry=http://registry.npm.taobao.org 然后等待

安装vue-cli脚手架构建工具

在命令行中运行命令npm install -g vue-cli

如果在此步骤时出现了vue不是内部或外部命令。。。。。。。。的提示时,有可能时vue没有安装,则需要在命令行运行npm vue

然后在命令行中运行cnpm install -g vue-cli

用vue-cli构建项目

创建项目,首先要选定目录,然后再命令行中把目录转到选定的目录。

例如:在此步骤,我在D盘新建了一个文件夹myvue

在我指定的myvue目录下,在命令行中运行命令 vue init webpack myvues。该命令个命令的意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的。myvues是整个项目文件夹的名称,这个文件夹会自动生成在我指定的myvue目录下。

运行初始化命令的时会让用户输入几个基本的选项,如项目名称,描述,作者等信息,如果不想填直接回车默认就好

安装项目所需的依赖

安装依赖包,首先cd到项目文件夹(myvues文件夹),然后运行命令 npm install 或者是cnpm install(因为我的无法npm下载,只能用cnpm),等待安装。

安装完之后,myvues目录下会多出一个node_modules文件夹,该文件夹就是我们项目需要的依赖包资源。

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

运行项目

在项目目录中,运行命令 npm run dev ,

然后在浏览器手动运行localhost:8080,运行成功则会出现如下界面

然后手动关闭(ctrl+c)。

安装json和resource和router

npm install vue-router --save     npm install vue-resource –sav这两句话等同于:

npm  install vue-router vue-resource --save

npm install json-server --save

  1. 3.   安装vue develop tools

安装步骤方法链接:

https://www.cnblogs.com/tanyongli/p/7554045.html

首先在github下载devtools源码,地址:

https://github.com/vuejs/vue-devtools

下载好devtools源码,进入vue-devtools-master工程 执行cnpm install, 下载依赖在此步骤中我将其直接放在D盘下

然后执行npm run build,编译源程序

该步骤完成后,修改shells、chrome目录下的mainifest.json 中的persistant为true:

打开谷歌浏览器的设置--->扩展程序,并勾选开发者模式

然后将刚刚编译后的工程中的shells目录下,chrome的整个文件夹直接拖拽到当前浏览器中,并选择启用,即可将插件安装到浏览器

打开一个已有的vue项目,运行项目,然后在浏览器中--->设置--->更多工具--->开发者工具,进入调试模式:发现vue.js is not detected  ,可以调整一下webpack.config.js的代码

最后重启vue项目就可以了。

原文地址:https://www.cnblogs.com/yang0629/p/8531359.html

时间: 2024-08-07 18:09:02

vue环境搭建的简单总结的相关文章

[PhoneGap]开发环境搭建与简单应用

目前,随着Google的Android手机和苹果的iphone手机的逐渐普及,越来越多开发者加入到移动应用开发的大军当中.其中,Android应用是基于Java语言基础上进行开发的,而苹果公司的iphone则是基于C语言开发的.如果开发者编写的应用需要同时在不同的移动设备上运行的话,则必须要掌握多种开发语言.而为了进一步简化移动应用的编程,Nitobi公司推出了一套开源的移动应用解决方案PhoneGap(http://www.phonegap.com). PhoneGap是一款开源的手机应用开发

【Android进阶】Junit单元测试环境搭建以及简单实用

单元测试的目的 首先,Junit单元测试要实现的功能,就是用来测试写好的方法是否能够正确的执行,一般多用于对业务方法的测试. 单元测试的环境配置 1.在AndroidManifest清单文件的Application节点下,引入单元测试使用的库 2.在AndroidManifest清单文件与Application节点平行的节点中,添加instrumentation节点 下面是一个完整的配置的代码 <manifest xmlns:android="http://schemas.android.

PHP小菜的学习之路(一) PHP环境搭建和简单调试

前面提到,反省不是目的,目的是要改变自己. 最近自己在业余时间在研究微信公众平台开发,在成为开发者的时候,URL一直不知道该怎么写,百度云开发者平台也没有提供对应C#的服务器.下载了个PHP的照葫芦画瓢,连蒙带造的简单的做了一个小的Demo.对于里面语法什么自己完全不懂,果然是彻彻底底的PHP菜鸟.因为想做微信平台开发,而且自己也没有自己的服务器和域名,又不打算买一个,就只能用PHP了.这也坚定了我想业余时间,简单的学习一下PHP的决心. 也许有人看到这里会说,你丫C#搞了两年还是菜鸟,现在还想

55.Vue环境搭建

Vue环境搭建 在搭建过程中出现的错误解决办法 https://www.cnblogs.com/lovebing/p/9488198.html 原文地址:https://www.cnblogs.com/sqyambition/p/10192858.html

Android NDK环境搭建与简单实例

一.NDK与JNI简介 NDK全称为native development kit本地语言(C&C++)开发包.而对应的是经常接触的Android-SDK,(software development kit)软件开发包(只支持java语言开发). 简单来说利用NDK,可以开发纯C&C++的代码,然后编译成库,让利用Android-SDK开发的Java程序调用.NDK开发的可以称之为底层开发或者jni(java  native interface)层开发,SDK开发可以称为上层开发. Andr

Maven仓库—Nexus环境搭建及简单介绍

1.    环境搭建 1.1  下载 http://www.sonatype.org/nexus/ NEXUS OSS [OSS = Open Source Software,开源软件--免费] NEXUS PROFESSIONAL -FREE TRIAL [专业版本--收费]. 所以选择NEXUS OSS 找到Download andInstall Nexus OSS.下载ZIP的即可: 1.2  配置 将下载的ZIP包解压,得到如下目录: 将Nexus的bin目录添加到Path环境变量中:

CentOS6.5环境下Python + Django + MySQL + eclipse开发web环境搭建的简单方法

这几天跟Linux下的Python + Django环境搭建卯上了.经过几天的琢磨,找到了一条自己认为给力的路径. 这里给出命令行,过程如下: 首次登陆,切换管理员: [[email protected] ~]$ suPassword: 查看当前的版本:[[email protected] web]# pythonPython 2.6.6 (r266:84292, Nov 22 2013, 12:11:10) [GCC 4.4.7 20120313 (Red Hat 4.4.7-4)] on l

【SSH】 之 Struts2环境搭建及简单应用开发

在上一篇文章中,我们一起了解了一下struts2的工作机制原理,接下来让我们进行一下简单应用的开发 (一)配置环境 1.建立web项目 2.导入jar包 其中struts2中有很多jar包,我们不需要全部引用,因为很多jar涉及第三方jar包.如果我们只导入struts里面的而没有导入第三方jar包所依赖的jar包,就会报错,影响开发 3.配置web.xml [html] view plain copy print? <?xml version="1.0" encoding=&q

solr5.1 tomcat7.x 环境搭建即简单功能测试

之所以想使用solr来进行学习,很大一部分原因就是,solr能够在某种程度上提供RESTFUL相关的URL请求连接,可以把它理解为 以搜索引擎为基础的存储服务系统 ,由于他的搜索可以是针对URL的,那么他的扩展性就会很强,也不会对整个代码开发侵入性太强. Lucene是一套提供搜索的类库,而Solr是建立在Lucene之上的一套全文检索的解决方案.你可以基于Lucene建立一套自己的搜索应用程序出来,也可以直接使用Solr.ElasticSearch等成熟的基于Lucene的搜索程序 源码地址: