vue-cli脚手架的环境搭建
vue-cli
(1)检查node版本
在安装vue的环境之前,安装NodeJS环境是必须的。可以使用node -v指令检查,需要保证安装了4.0版本以上的nodeJS环境。
当然,没有安装的话,去Node.js的官网下载一下,各种下一步,傻瓜式安装就好,非常方便。
tips:这里说一下我自己踩过的一个坑,我最开始,安装的是国外官网上最新的7.3.0的版本,然后再最后npm run dev的时候各种报错。最后的解决方式是把node的版本回退到了6.2.0。所以这里推介大家安装NodeJs 4~6之间的版本。
(2)安装vue-cli
接下来进入正题,先全局安装vue-cli。
使用指令npm install -g vue-cli
接下来就是等等等~~毕竟npm真的很慢。如果发现在一个地方长期卡着不动,可以ctrl+c取消,然后再重新执行。
还有一种解决方式是使用淘宝的cnpm镜像。
传送门 这里最前边有写安装cnpm镜像的方法,安装后把之前代码的npm改成cnpm就可以了。
最后做完以后,使用vue 指令检查一下是否安装成功,如果成功则结果如下:
(3)初始化项目
先cd到自己想要创建新项目的文件夹下,然后使用vue init指令
vue init 模板类型 项目名称
vue的模板类型,有很多种,可以使用vue list 指令查看
我这里使用的是webpack模板,项目名叫sell,指令如下:
vue init webpack sell
然后可以一路回车下去,里边的选项可以多数是用来确认项目名称,作者,描述信息以及测试等内容,可以根据需求自己选择。(这里sell是我的项目名)
接下来进入sell文件夹,运行npm install。会发现项目中多了一个叫node_modules的文件夹,目录结构如下:
(4)运行vue环境
接下来使用 npm run dev命令运行项目环境,效果如下:
这里显示了已经监听了8080端口,接下来在浏览器访问http://localhost:8080/
会看到如下页面
证明项目已启动,环境也是搭建成功啦~~
vue-cli脚手架的环境搭建的更多相关文章
- 13. Vue CLI脚手架
一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...
- vue前端+java后端 vue + vuex + koa2开发环境搭建及示例开发
vue + vuex + koa2开发环境搭建及示例开发 https://segmentfault.com/a/1190000012918518 vue前端+java后端 https://blog.c ...
- 黑马eesy_15 Vue:04.Vue案例(ssm环境搭建)
黑马eesy_15 Vue:02.常用语法 黑马eesy_15 Vue:03.生命周期 黑马eesy_15 Vue:04.Vue案例(ssm环境搭建) 黑马eesy_15 Vue:04.综合案例(前端 ...
- 使用Vue CLI脚手架搭建vue项目
本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】
缘起 哈喽大家好,兜兜转转终于来到了Vue实战环节,前边的 6 篇关于Vue基础文章我刚刚简单看了看,感觉写的还是不行呀,不是很系统,所以大家可能看上去比较累,还是得抽时间去润润色,修改修改语句和样式 ...
- windows下vue+webpack前端开发环境搭建及nginx部署
一.开发环境搭建 1.前端框架一般都依赖nodejs,我们首先要安装node.js.请参考http://www.cnblogs.com/wuac/p/6381819.html. 2.由于许多npm的源 ...
- Vue项目的npm环境搭建
Vue项目的环境搭建主要步骤如下: vue项目创建 安装NodeJS +到官网下载自己系统对应的版本,这里我们下载Windows系统的64位zip文件,下载完成后解压,可以看到里面有一个node.ex ...
- 萌新--关于vue.js入门及环境搭建
十几天闭关修炼,恶补了html跟css以及JavaScript相应的基础知识,恰巧有个群友准备做开源项目,愿意带着我做,但是要求我必须懂vue.js,所以开始恶补vue.js相关的东西. 在淘宝上买了 ...
- Vue.js安装及环境搭建
Vue.js环境搭建-Windows版 步骤一:安装node.js 在搭建vue的开发环境之前,需要先下载node.js,vue的运行是要依赖于node的npm的管理工具来实现,node可以在官网或者 ...
- Windows 环境下vue+webpack前端开发环境搭建
一.开发环境搭建 1.前端框架一般依赖node.js,我们首先要安装node.js. 2.由于许多npm 的源都在国外的地址,安装起来特别慢,所以我们这里利用淘宝的镜像服务器. 安装命令为:npm i ...
随机推荐
- SpringMVC处理multipart请求.
一.简述 multipart格式的数据会将一个表单拆分为多个部分(part),每个部分对应一个输入域.在一般的表单输入域中,它所对应的部分中会放置文本型数据,但是如果上传文件的话,它所对应的部分可以是 ...
- 关于HTTP协议头域详解
HTTP1.1 请求头:消息头 Accept:text/html,image/* 告诉服务器,客户机支持的数据类型 Accept-Charset:ISO-8859-1 告诉服务器,客户机采用的编 ...
- http1.0 的哑代理问题
感觉这就和回字的四种写法一样,并无卵用 原以为http1.1的新特性是提供了keep-alive,后来才知道,keep-alive选项http1.1已经不支持了,http1.1对该功能进行了改版 关于 ...
- 5、员工上班时间的问题 - CEO之公司管理经验谈
员工上班时间一般是根据公司的规章制度来制定的.当然,在不同的地点也有不同的做法.比如北京.上海.广州.深圳这些重点的大点的城市,加班的时间就相对比较多一些.但是按照笔者的想法,一般是一天7-8小时工作 ...
- sql server 各种等待类型-转
等待的类型 资源等待 当某个工作线程请求访问某个不可用的资源(因为该资源正在由其他某个工作线程使用,或者该资源尚不可用)时,便会发生资源等待.资源等待的示例包括锁等待.闩锁等待.网络等待以及磁盘 I/ ...
- Mac Sublime text3 如何设置更加漂亮好用?
说明:配置是根据自己的需求搜索了蛮多博客测试总结的. 显示效果 配置信息: command + , [逗号], 右侧配置信息 { "color_scheme": "Pac ...
- 通过tokenPlease()函数获取accessToken
作者:陈希章 发表于 2018年1月5日 这是一个很小的技巧,而且用几句话就能讲明白.事情是这样的,我最近在回顾之前写过的文章:通过其他第三方工具体验Microsoft Graph 的时候,发现最近的 ...
- ECMAScript 6新特性简记
ECMAScript 6.0是JavaScript语言的2015年6月的发布版. 一.let和const命令 let:用来声明变量,用法类似于var,但是只在let命令所在的代码块内有效. var a ...
- 【Python3之匿名函数及递归】
一.匿名函数及内置函数补充 1.语法 Python使用lambda关键字创造匿名函数.所谓匿名,意即不再使用def语句这样标准的形式定义一个函数. 语法: lambda [arg1[, arg2, . ...
- 微信小程序跳一跳辅助程序(手动版)
最近,微信官方推出了demo小程序游戏<跳一跳>,这个游戏操作简单,容易上手,却又不容易获得高分,受到很多人的喜爱(emm...这游戏有毒).自己也尝试了玩了几次,作为一个手残+脑残的资深 ...