完整的vue开发环境搭建教程

一、安装node.js(https://nodejs.org/en/)

下载完毕后，可以安装node，建议不要安装在系统盘（如C：）。

输出版本号则安装成功

node -v//输出版本号则安装成功

二、设置nodejs prefix（全局）和cache（缓存）路径

npm root -g

查看npm的prefix和cache路径配置信息

npm config get cache
npm config get prefix

修改全局和缓存路径
1）. 先在设置路径目录下新建两个文件夹(eg：node_global和node_cache)，eg：直接在nodejsd安装目录下

2）. 设置路径

npm config set prefix "D:\ProgramFile\nodejs\node_global"npm config set cache "D:\ProgramFile\nodejs\node_cache"

设置成功后，之后用命令npm install XXX -g安装以后模块就在D:\vueProject\nodejs\node_global里

三、基于 Node.js 安装cnpm（淘宝镜像）

 npm install -g cnpm --registry=https://registry.npm.taobao.orgnpm config set disturl https://npm.taobao.org/dist --global

四、设置环境变量（非常重要）

说明：设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令，而不需要输入全路径
1、鼠标右键"此电脑"，选择“属性”菜单，在弹出的“系统”对话框中左侧选择“高级系统设置”，弹出“系统属性”对话框。
2、修改系统变量PATH

3、新增系统变量NODE_PATH

五、安装Vue

cnpm install vue -g

六、安装vue命令行工具，即vue-cli 脚手架

npm uninstall vue-cli -g//删除以前的vue clicnpm install vue-cli -g//vue cli2
cnpm install -g @vue/cli//vue cli3

七、新项目的创建

1、打开存放新建项目的文件夹

2、打开开始菜单，输入 CMD，或使用快捷键 win+R，输入 CMD，敲回车，弹出命令提示符。打开你将要新建的项目目录

vue init webpack-simple mytest//vue cli2
vue create project-name//vue cli3

注：项目名必须为英文且不能大写

3、运行该项目，测试一下该项目是否能够正常工作，这种方式是用nodejs来启动。

cnpm run dev//vue cli2
cnpm run serve //vue cli3

完整的vue开发环境搭建教程相关推荐

eclipse--android开发环境搭建教程
引言在windows安装Android的开发环境不简单也说不上算复杂,但由于国内无法正常访问google给android开发环境搭建带来不小的麻烦.现将本人搭建过程记录如下,希望会对投身androi ...
五部搞定Android开发环境部署——费UC噶不过详细的Android开发环境搭建教程
五步搞定Android开发环境部署--非常详细的Android开发环境搭建教程引言在windows安装Android的开发环境不简单也说不上算复杂,本文写给第一次想在自己Windows上建立 ...
Vue 开发环境搭建（Mac 版）
Vue 开发环境搭建(Mac 版) 参考: https://www.jianshu.com/p/cc722eba1f46 https://www.runoob.com/w3cnote/vue2-sta ...
Minecraft我的世界 forge mdk1.13（1.14）开发环境搭建教程及经验
Minecraft我的世界 forge mdk1.13(1.14)开发环境搭建教程及经验 1.前言 2. 1.13与1.12的区别在forgegradle方面在mdk开发方面 3.安装JDK和ID ...
Arduino框架下联盛德W801开发环境搭建教程
Arduino框架下联盛德W801开发环境搭建教程联盛德W801拥有自己的SDK集成开发工具,能做到这一点非常令人敬佩和了不起.国内好多芯片厂商都需要依托第三方开发工具集来实现对自己产品的开发.多元 ...
vue安装和开发环境搭建教程2021年
1.安装node.js地址:https://nodejs.org/en/ 自定义安装地址,路径不要含空格(如\Program Files带有空格),一路next 我的安装路径是D:\Program\n ...
五步搞定Android开发环境部署——非常详细的Android开发环境搭建教程（转）
引言在windows安装Android的开发环境不简单也说不上算复杂,本文写给第一次想在自己Windows上建立Android开发环境投入Android浪潮的朋友们,为了确保大家能顺利完成开发环境的 ...
laravel+vue开发环境搭建
From: https://www.jianshu.com/p/1c2cc11ba46f 描述最近通过laravel在公司做了一些项目,但本身前端出身的我,总是感觉lphp开发过程中,前端写好页面, ...
《ESP32-Arduino开发》GUI设计 LVGL 开发环境搭建教程（从工程目录到模拟器）
前言:最近闲着无聊,看到手头正好有一块tft彩屏,想着拿来玩玩.既然用到了显示屏,自然是离不开ui设计,lvgl是嵌入式一个开源图形库,具备"Light"(轻量)和"Ve ...
一 vue开发环境搭建
2016年,Vue同Angular.React形成三足鼎立的局面,让前端的开发者顾不暇接,今天我们就来了解一下Vue的环境搭建. 一.node.js安装: node.js:一种javascript的运 ...