vue的开发环境的搭建

不管什么软件我们都要去官网下载安装,这是作为专业程序员的安全意识。

1、安装node.js

官方下载的页面:点击这里

大约展示的页面是这样子的!我们演示是windows 64位的安装

关于版本的选择,作为开发我们最好还是用已经比较稳定的版本,这样话就算遇到坑,解决的问题的文档也好找,

最新版本的可能会有未知的错误 ,官方也会推荐稳定的版本,

后面就是下载好下一步下一步就好了!

验证一下我们是否装成功,打开管理权限的cmd

出现下面的样子,说明node已经装好了

操作的央视就是跟我们python装模块一样,由于国内链接国外的资源不是一般的慢,

所以我们要制定以下镜像

基于node.js,利用淘宝npm镜像安装相关依赖
在管理员权限的cmd里直接输入:
npm install -g cnpm --registry=https://registry.npm.taobao.org
回车,等待安装...

安装全局vue-cli脚手架,用于帮助搭建所需的模板框架
在cmd里输入cnpm install -g vue-cli,回车,等待安装;输入vue,回车,若出现vue信息说明表示成功

创建项目
①命令行定位到想创建文件所在路径
②执行命令:vue init webpack markdowndemo (项目的名字)

③ 进入项目,下载依赖

④测试是否成功
在cmd里输入:cnpm run dev

在浏览里输入:localhost:8080(默认端口为8080)

注:
1.npm run dev报错可以从以下几方面检查:
(1)cmd是否已管理员权限运行
(2)npm版本是否足够高,升级使用 npm -g update
(3)8080端口是否被占用
(4)当前操作目录是否在项目根目录

2.vue.js如何更改默认端口号8080为指定端口
执行npm run dev实际是在调用根目录下的package.json,打开package.json后可发现有这样一段代码

"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js"
},

由此可知,我们应该查看build目录下的dev-server.js文件,在dev-server.js文件中可找到

var uri = 'http://localhost:' + port

此处的port便是我们将要寻找的,在dev-server.js的开始部分我们可以发现

var path = require('path')

而path又是从哪里来的呢?根目录下有一个config文件夹打开config目录下的index.js

dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
cssSourceMap: false
}

这里不仅可以改变端口,还可以根据需要改变其他配置信息。

Vue.js

vue的开发环境搭建命令加图解的更多相关文章

  1. windows下vue.js开发环境搭建教程

    这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中 ...

  2. 应用一:Vue之开发环境搭建

    简单分享下vue项目的开发环境搭建流程~ 1.安装nodeJS vue的运行是要依赖于node的npm的管理工具来实现,下载地址:https://nodejs.org/en/.安装完成之后以管理员身份 ...

  3. vue.js开发环境搭建以及创建一个vue实例

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

  4. Electron+Vue+ElementUI开发环境搭建

    Node环境搭建 本文假定你完成了nodejs的环境基础搭建: 镜像配置(暂时只配置node包镜像源,部分包的二进制镜像源后续讨论).全局以及缓存路径配置,全局路径加入到了环境变量 $ node -v ...

  5. Vue.js开发环境搭建的介绍

    包含了最基础的Vue.js的框架,包含了打包工具和测试工具,开发调试的最基本的服务器,不需要关注细节,只需关注Vuejs对项目的实现 npm在国内的网络使用较慢,所以推荐下载安装淘宝的镜像 1: 2: ...

  6. Vue+VSCode开发环境搭建

    时间2019.9月 1. 安装 nodeJS; 安装VScode 安装好nodeJS之后,默认会安装好npm 测试 nodeJS 和npm是否可以执行 node -v npm -v 1.1 VScod ...

  7. Vue项目开发环境搭建

    初步学习vue.js相关知识,下面是我搭建环境中一些经验总结,希望可以帮到有需要的同学.首选先安装好以下的工具和环境. 一.软件安装 1.WebStorm官网下载地址:https://www.jetb ...

  8. vue.js开发环境搭建

    1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html) 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd ...

  9. 【vue基础学习】vue.js开发环境搭建

    1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html) 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd ...

随机推荐

  1. hdu 1162 Eddy's picture(最小生成树算法)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1162 Eddy's picture Time Limit: 2000/1000 MS (Java/Ot ...

  2. socket编程中write、read和send、recv之间的区别~转载

    socket编程中write.read和send.recv之间的区别   http://blog.csdn.net/petershina/article/details/7946615 一旦,我们建立 ...

  3. C基础 多用户分级日志库 sclog

    引言 - sclog 总的设计思路 sclog在之前已经内置到simplec 简易c开发框架中一个日志库. 最近对其重新设计了一下. 减少了对外暴露的接口. 也是C开发中一个轮子. 比较简单, 非常适 ...

  4. JavaScript知识点的总结

    一.Javascript的含义 是一种解释性的语言,主要给网页添加各色各样的动态功能,同时为用户提供浏览效果. 二.JavaScript的主要特点 1. 简单性 2. 动态性 3. 安全性 4. 跨平 ...

  5. 如何用jQuery获得radio的值

    如何获得radio的值,在网上查了一下,下面总结几种解决方法,. 1.获取选中值: $('input:radio:checked').val(): $("input[type='radio' ...

  6. Java单线程多实例和多线程多实例

    最近写了一个程序,是采用多线程往redis里面写入数据,想统计一下一共写了多少条数据,于是用了一个static的全局变量count来累加,这块代码抽象出来就是这样的: public class Mul ...

  7. hdu 4240(最大流+最大流量的路)

    Route Redundancy Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  8. WordPress匿名投稿插件:DX-Contribute(WP我要投稿,我要爆料)

    倡萌在<WordPress添加投稿功能(无需注册/可邮件通知站长和投稿人) >中分享过,通过修改主题文件实现游客快捷投稿的功能,但是有部分同学就是不太会动手,那么今天就分享一个WordPr ...

  9. Nginx+PHP “No input file specified”错误的解决办法

    配置官网商城php网站时候,界面报错“No input file specified” 原理: 任何对.php文件的请求,都简单地交给php-cgi去处理,但没有验证该php文件是否存在. PHP文件 ...

  10. SpringMVC一些功能

    1.日期格式转换 当页面提交日期格式时 默认的格式为2017/10/1 如果指定日期格式为2017-10-1 //初始化绑定日期格式--不定义初始化格式时只能默认用yyyy/MM/dd格式 @Init ...