Vue安装以及Vue项目创建以及Vue Devtools安装
这几天一直在学习Vue.js框架。
因为以前没有前端项目的经验,也没学过什么前端框架,所以,对于vue.js的学习有些不知所措。
在vue.js官网看教程,按照教程指点,可以不用脚手架开发,也可以搭建开发环境。
这里记录下搭建过程(教程参考网上各前辈提供的资料):
安装Node.js:从Node.js官网安装Node.js。
安装完成后,直接在命令行程序(win + R => 输入 cmd)中输入 node -v 验证是否安装成功。
如图,node -v后输出了版本号“v6.11.4”,安装成功。
安装淘宝npm镜像(在国内淘宝npm镜像速度较快,可代替官方npm镜像):命令提示符中输入 => npm install -g cnpm –registry=https://registry.npm.taobao.org 回车,等待安装完成。
安装vue命令行工具(Vue-CLI):命令行程序内输入 cnpm install -g vue-cli (此处输入cnpm就是表示使用淘宝npm镜像,若使用官方npm,则输入 npm install --global vue-cli),回车,等待安装完成。
安装完成后,直接在命令行程序中输入 vue 验证是否安装成功。
如图,出现了类似以上的信息,那么,安装成功。
安装过程告一段落。
接下来,开始创建项目。
还是在命令行程序中操作 ↓
【这一步根据喜好,自由决定是否需要,并自由决定输入内容:在创建项目前,在命令行程序中输入 cd d:\文档 进入 d盘 的 文档 文件夹内。这样就可以将下面步骤创建的项目,创建在 d盘 的 文档 文件夹内。当然,如上所述,自由决定项目创建的路径。】
命令行程序中输入 vue init webpack project_folder_name (项目文件夹名自定义),回车。
稍等,会一步一步出现如下信息:
按照提示,完成即可。
此时,项目创建完成。
开始安装依赖:
命令行程序中输入 cd project_folder_name (刚才自定义的项目文件夹名称)进入文件夹。
命令行程序中输入 cnpm install (使用cnpm的原因同上面的cnpm)。回车,等待安装完成。
此时,项目文件夹目录内,应该已经有了 node_modules 文件夹,那么,恭喜!依赖安装完成。
不出意外的话,项目应该已经搭建完成了。
试一试吧:命令行程序中输入 npm run dev
出现以上信息后,系统将自动打开浏览器(地址为:http://localhost:8080),如果没有自动打开浏览器,可在输入 npm run dev 后手动打开浏览器,并输入以上地址。
综上!
(以上Win10 64系统)
——————————————————————— 分割线 ———————————————————————
Vue Devtools 安装:
点击 Vue Devtools 进入下载页面。
可下载zip包,放入本地 d盘的文档 文件夹里(您随意,爱放哪就放哪,自己找得到就行)。
解压到文件夹(此处,我直接设定问文件夹名和压缩包同名。)
下载好,并解压好后,打开命令行程序。
在命令行程序中输入 cd D:\文档\vue-devtools-master 进入工程所在文件夹。
在命令行程序中输入 cnpm install 回车,等待。
命令行程序中输入 npm run build 回车,等待。
然后,打开下图目录内的 mainfest.json 文件。
修改 background 节点下 persistent 属性的值 为 true。
保存。
打开 Google Chrome。
在网址栏输入 chrome://extensions 打开扩展程序。
勾选开发者模式,并点击 ”加载已解压的拓展程序...“ 按钮。
选择chrome文件夹。
安装完成。
效果图:
Vue安装以及Vue项目创建以及Vue Devtools安装的更多相关文章
- vue的安装配置与项目创建
1,安装vue必须先安装node.js. --------去官网安装node.js 因为npm依赖node.js环境,使用npm的时候需要安装node.js.安装node.js的时候npm会默认安装 ...
- Vue环境搭建和项目创建
目录 vue项目 环境搭建 项目创建 vue项目 环境搭建 node node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城 ...
- mc01_IntelliJ IDEA安装与Java项目创建以及Tomcat配置
IntelliJ IDEA安装与激活 下载地址:http://www.jetbrains.com/idea/ 安装下一步下一步即可,关键是注册激活,该部分分两个步骤: 1. 配置windows hos ...
- Web框架之Django_01初识(三大主流web框架、Django安装、Django项目创建方式及其相关配置、Django基础三件套:HttpResponse、render、redirect)
摘要: Web框架概述 Django简介 Django项目创建 Django基础必备三件套(HttpResponse.render.redirect) 一.Web框架概述: Python三大主流Web ...
- python 2.django的镜像安装与第一次项目创建-运行以及app创建
django的设计模式 Django是一个遵循MVC设计模式的框架,MVC是Model.View.Controller的三个单词的简写.分别代表模型.视图.控制器. 而Django也是是一个MTV的设 ...
- Vue入门:Vue项目创建及启动
1. 创建Vue项目存放地址 用于存放Vue项目,找个自己处理方便的地方.本人地址:D:\Program Files\Workspace\Vue 2. 创建项目 进入cmd窗口 进入项目存放地址 执行 ...
- vue进阶:基于vue-cli创建项目(搭建手脚架)
vue-cli安装.创建项目 基于vue-cli创建的项目进行开发 使用vue-cli图形化界面搭建项目 插件与工具 一.vue-cli简介.安装.创建项目 Vue-cli是基于Vue.js进行快速开 ...
- vue3官网介绍,安装,创建一个vue实例
前言:这一章主要是vue的介绍.安装.以及如何创建一个vue实例. 一.vue介绍 vue3中文官网:建议先自己看官网. https://v3.cn.vuejs.org/ vue是渐进式框架,渐进式指 ...
- djiango 虚拟环境与项目创建
建立虚拟环境 一,查看有那些虚拟环境 :workon 二,创建虚拟环境:mkvirtualenv -p/usr/bin/python3 django(p后面是路径) 三,进入虚拟环境:workon d ...
随机推荐
- java开学考试感想及代码
上周四我们的第一节java课,王老师给我们进行啦开学考试,这也是上学期放假之前给我们约定好的 但是情况显然没有我想的那么好,其实我觉得这个atm系统比上届学生信息管理系统难的多,上届的话毕竟有小学期的 ...
- [转]NEO与以太坊:为什么NEO可能是2018年最强的加密货币
本文转自:https://baijiahao.baidu.com/s?id=1591291802129464257&wfr=spider&for=pc NEO,它可以与以太坊竞争吗?N ...
- WinForm 多语言处理
多语言处理工具我使用的是 SailingEase .NET Resources Tool ,好处是导出一个Excel,把具体翻译工作交给专业的人来做,翻译ok后再导入,缺点就是后续更改麻烦,添加一个 ...
- TFS Negotiate方式登录的IIS配置
使用vsts-agent连接到tfs(tfs2017)配置代理客户端,可以通过PAT.Negotiate.Integrated.Alternate四种方式登录.(参考) 默认情况下,采用Negotia ...
- C# 从Excel 批量导入数据库
最近遇到了关于 C# MVC 批量添加数据的问题,解决后就自己写了一个未完成的小Demo 不管什么编程语言都会提供操作Excel文件的方式,C#操作Excel主要有以下几种方式: 1.Excel 说 ...
- 用PDMReader工具生成数据库设计文档(转载)
来源:http://blog.csdn.net/xinglun88/article/details/19987719 第一步:下载并安装PDMReader,资源网站: http://www.pdmre ...
- .NET编译过程
总结一下.NET的编译过程, 一般的高级编程语言会把代码编译成机器码,也就是我们说的非托管代码,执行在编译它的电脑上. 而.NET编译代码的时候会把高级编程语言编译成中间语言 运行在CLR(公共语言运 ...
- struts2 上传下载文件,异常处理,数据类型转换
一,web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app version=" ...
- java图形用户界面之列表框
列表框通过Swing组件JList产生,其总是在屏幕上占据固定行数的空间.如果要得到列表框中被选中的元素,只需调用getSelectedValuesList(),它可以产生一个字符串数组,内容为被选中 ...
- webapi 后台跳转 后台输出html和script
1.跳转 [HttpGet]public HttpResponseMessage LinkTo(){ HttpResponseMessage resp = new HttpResponseMessag ...