vue基本开发环境搭建
- 先安装node运行环境
下载网址 https://nodejs.org/en/或者http://nodejs.cn/ - 检查node是否安装成功
命令行窗口直接输入$ node -v
如果输出版本号,说明我们安装node 环境成功
再查看npm版本号$ npm -v
- 安装淘宝镜像(此步骤是为了提高下载速度,可以忽略)
如果访问外网比较慢,可以使用淘宝镜像。
安装淘宝镜像,在命令行中输入$ npm install -g cnpm --registry=https://registry.npm.taobao.org
安装之后我们就可以使用cnpm代替npm了,下载速度急速提升呐。当然,如果不想使用淘宝镜像,直接用npm也是可以的。
- 接下来就是最关键的一步-----vue-cli
$ cnpm install -g vue-cli
安装成功之后查看安装的版本号(v要大写)
$ vue -V
如果能输出本版好证明安装成功。
- 接下来就是创建项目了
5.1 初始化项目$ vue init webpack <你的项目名称>
一直回车可以看到下图

其中的每一项都可以自己根据自己的需要去填写。
Install vue-router:是否安装vue-router,我们项目中肯定会用到,所以选择yes
Use ESLint to lint your code:是否需要 js 语法检测 ,目前用不到,选择no
直到安装成功。 - 进入到你的项目文件夹
执行$ npm run dev
如果没报错,出现下图

那么恭喜你,你的第一个vue项目就创建成功了。
如果报错了,很简单,只需要输入$ cnpm install
安装所需要的依赖,然后在执行
$ npm run dev
即可。
- 如果想要打包,可以输入
$ npm run build
会在名目文件见中自动生成一个新的文件夹 dist
如果打包之后,访问页面出现白屏问题,说明打包的路径有问题,只需要找到config文件夹,打开index.js文件,找到

在/之前加上一个 . 即可 - 至此,一个完整的基于vue-cli创建的vue项目就完成了。
vue基本开发环境搭建的更多相关文章
- windows下vue.js开发环境搭建教程
这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中 ...
- vue的开发环境搭建命令加图解
vue的开发环境的搭建 不管什么软件我们都要去官网下载安装,这是作为专业程序员的安全意识. 1.安装node.js 官方下载的页面:点击这里 大约展示的页面是这样子的!我们演示是windows 64位 ...
- 应用一:Vue之开发环境搭建
简单分享下vue项目的开发环境搭建流程~ 1.安装nodeJS vue的运行是要依赖于node的npm的管理工具来实现,下载地址:https://nodejs.org/en/.安装完成之后以管理员身份 ...
- vue.js开发环境搭建以及创建一个vue实例
Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js ...
- Electron+Vue+ElementUI开发环境搭建
Node环境搭建 本文假定你完成了nodejs的环境基础搭建: 镜像配置(暂时只配置node包镜像源,部分包的二进制镜像源后续讨论).全局以及缓存路径配置,全局路径加入到了环境变量 $ node -v ...
- vue.js开发环境搭建
1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html) 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd ...
- 【vue基础学习】vue.js开发环境搭建
1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html) 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd ...
- vue.js 开发环境搭建
1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html) 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd ...
- Vue.js开发环境搭建的介绍
包含了最基础的Vue.js的框架,包含了打包工具和测试工具,开发调试的最基本的服务器,不需要关注细节,只需关注Vuejs对项目的实现 npm在国内的网络使用较慢,所以推荐下载安装淘宝的镜像 1: 2: ...
- Vue+VSCode开发环境搭建
时间2019.9月 1. 安装 nodeJS; 安装VScode 安装好nodeJS之后,默认会安装好npm 测试 nodeJS 和npm是否可以执行 node -v npm -v 1.1 VScod ...
随机推荐
- 7.19 NOIP模拟6
这次考试又一次让mikufun认识到了常数的重要性 T1.那一天我们许下约定 这题一看到D<=1e12,想都没想,矩阵快速幂!然后飞快的码了一个,复杂度n^3logD,让后我观察了一下这个转移矩 ...
- NOIP模拟 40
考得更嘛也不是了. 不过如果不犯任何低错的话.. T1 我神奇地想要缩减码量 比如想把尽量多的$b[i]-1$省掉 于是求$b[i]$的时候先减了个一 本来是正的 减完就忘了他应该是非负的了 于是线段 ...
- 描述Linux发行版的系统目录名称命名规则以及用途
linux各种发行版都遵循LSB(Linux Stadards Base)规则,使用一致的相关的基础目录名称,使用根目录系统结构(root filesystem),使用FHS(Files Hierar ...
- 使用Typescript重构axios(二十四)——防御XSRF攻击
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
- 14 Zabbix4.4.0系统实现监控checkpoint设备
点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 14 Zabbix4.4.0系统实现监控checkpoint设备 1. 前期规划信息 2. 配置 ...
- Python 基础之socket编程(三)
python 基础之socket编程(三) 前面实现的基于socket通信只能实现什么呢?在tcp协议的通信中就是一个用户说一句,服务端给你回一句,你再给服务端说一句,服务端再给你回一句,就这样一直友 ...
- Mac上sonar插件的安装及使用
本文主要讲解sonar的安装及使用. 分为两个维度来讲解 1. 使用sonarqube以及自带的Derby数据库 2. 使用sonarqube以及配置mysql数据库 ---------------- ...
- 一.web服务机制
web服务机制 我们先跟着**(Web服务器工作原理总体描述01)这张图,将一次Web服务的工作流程过一遍,我们假设以浏览器作为客户端(1) 用户做出了一个操作,可以是填写网址敲回车,可以是点击链接, ...
- 微擎 pdo_fetchall() 函数
微擎 pdo_fetchall() 函数 注意点: 该函数内部直接执行原生 SQL 语句 如果在传递表名的时候使用了 tablename .则不加 ims_ 前缀 参数的传递通过 :param 的形式 ...
- C语言|博客作业08
这个作业属于哪个课程 C语言程序设计II 这个作业的要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-1/homework/9976 我在这个课程的 ...