安装vue.js
1. 下载node
https://nodejs.org/dist/v8.11.2/node-v8.11.2-x64.msi
2. 查看npm版本
在cmd下输入命令:npm -v
如果低于3.0版本需要进行升级(一般nodejs自带的npm的版本都太低,我在第一次运行的时候就被告知版本太低无法运行)
升级方法:
在cmd命令下cd到nodejs安装目录,然后输入以下命令:npm update npm
这里要等待一下。更新完成后再使用:npm -v 检查一下版本
3. cnpm的安装
cnpm是淘宝的一个镜像,安装之后可以使用cnpm安装命令工具,安装速度会加快。
直接使用npm install -g cnpm –registry=https://registry.npm.taobao.org
命令安装即可。
4. 安装vue-cli
vue-cli是vue官方提供的一个命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。
安装命令为:cnpm install -g vue-cli,回车,等待安装。
安装完后,检查是否安装成功,输入vue -V,出现以下版本信息:
将vue.cmd的路径加入Path环境变量中
这里是最容易出错的地方,因为要用大写的V
5. 新建一个Vue项目
新建一个文件夹vueJs用于存放项目
cd到此文件夹,输入:vue init webpack vue-demo
按照以下设置:
安装项目依赖的包
cd到vue-demo 文件夹,执行 nmp install,安装依赖包,安装完成之后,项目目录下多了node_modules
6. 更改默认端口号8080为指定端口
在命令行里输入 npm run dev,执行完成后启动项目,浏览器出现以下接结果
修改为8070
安装vue.js的更多相关文章
- 【原】无脑操作:Chrome浏览器安装Vue.js devtool
学习Vue.js时,Chrome浏览器安装Vue.js devtool能很方便的查看Vue对象.组件.事件等. 本文以Chrome浏览器插件Vue.js devtools_3.1.2_0.crx的安装 ...
- 【转】安装Vue.js的方法
安装vue.js的方法 一.简介 Vue.js 是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量 ...
- Mac安装vue.js开发环境
Mac安装vue.js开发环境 DannyHooDanny的专栏订阅 一.vue.js开发环境 二.初始化一个vue.js项目 三.vue.js项目打包部署 本来以为在Mac上搭建vue.js的环境挺 ...
- IDEA安装vue.js插件后,new没有Vue component
首先要安装vue相关的插件vue.js 但是很多人安装vue.js右键发现没有vue Componment,解决方法如下 Settings>Editor>File and Code Tem ...
- 如何在Window下安装node\npm\cnpm,并安装vue.js,创建项目
1.安装node.js node.js的官方地址为:https://nodejs.org/en/download/. 根据windows版本后,选择要下载的安装包,下载完毕,按照windows一般应用 ...
- 【vue.js】windows下安装vue.js
windows下搭建vue开发环境 Vue.js是一套构建用户界面的 “渐进式框架”.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常 ...
- 安装Vue.js的方法有三种
1 使用独立的版本 在Vue.js官网上直接下载,在script标签里引用. 2 使用CND方法(不推荐) 3 NMP 方法 在用Vue.js构建大型应用的时候推荐使用NMP安装方法,NMP能很好的和 ...
- 安装Vue.js devtools
1.下载安装 https://github.com/vuejs/vue-devtools#vue-devtools 通过以上地址下载安装包,解压以后进入文件,按住shift,点击鼠标右键打开命令窗口 ...
- 使用淘宝镜像cnpm安装Vue.js
简介: Vue.js是前端一个比较火的MVVM框架, 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑 ...
- npm安装Vue.js
我之前是有安装过npm的 使用淘宝 NPM 镜像 $ npm install -g cnpm --registry=https://registry.npm.taobao.org 查看nmp版本 $ ...
随机推荐
- AGC014E Blue and Red Tree
题意 There is a tree with \(N\) vertices numbered \(1\) through \(N\). The \(i\)-th of the \(N−1\) edg ...
- day11 python学习 函数的建立,返回值,参数
函数的定义主要有如下要点: def:表示函数的关键字 函数名:函数的名称,日后根据函数名调用函数 函数体:函数中进行一系列的逻辑计算,如:发送邮件.计算出 [11,22,38,888,2]中的最大数等 ...
- stardog graphql 简单操作
预备环境: 下载stardog 软件包 graphql 查询地址 创建一个简单数据库 ./stardog-admin db create -nstarwars graphql 查询方式 http 地址 ...
- Git的一些基本操作和命令
1.创建版本库 在D盘中打开Git Bash Here 1.1.创建一个空目录 Mkdir gitDemo –创建一个目录 Cd gitDemo --进入gitDemo目录 Pwd –查看当前目录的 ...
- 教你如何阅读Oracle数据库官方文档
< Ask Oracle官方原创 > Oracle 官方文档 数量庞大,而且往往没有侧重点,让oracle新手看起来很费力.但是,仍有很多Oracle使用者认为任何oracle学习资料都比 ...
- java中字符与字节的编码关系
在 GB 2312 编码或 GBK 编码中,一个英文字母字符存储需要1个字节,一个汉字字符存储需要2个字节. 在UTF-8编码中,一个英文字母字符存储需要1个字节,一个汉字字符储存需要3到4个字节. ...
- C# Request.Params与Request.QueryString 的区别
1.Request.Params包含Request.QueryString,request.form.request.cookies和request.servervariables.这几种查找的时候会 ...
- hanlp中文自然语言处理的几种分词方法
自然语言处理在大数据以及近年来大火的人工智能方面都有着非同寻常的意义.那么,什么是自然语言处理呢?在没有接触到大数据这方面的时候,也只是以前在学习计算机方面知识时听说过自然语言处理.书本上对于自然语言 ...
- github 改位置
在设置里改位置后,先在本地库上右键"stop track this repo". 然后在在线库重新CLONE.
- spring SOA architecture
在谈这个之前,还得再说下SOA和平台.SOA做两件事情,一个是解耦并识别可重用的服务,一个是对服务进行灵活组装和编排满足业务需求,SOA核心是业务和技术的解耦,服务和能力的复用.而在IT领域的平台平台 ...