Vue开发环境搭建

Vue开发环境搭建
1下载node.js
https://nodejs.org/en/

vue版本为2.9.6

2.查看nodehe npm版本
打开命令行工具（win+R）,输入node -v查看node的版本，输入npm -v 查看npm的版本信息，如果没有报错说明node.js安装成功

3设置全局和缓存文件夹（不设置的情况下可配置环境变量）
npm config set prefix “C:\Program Files\nodejs\node_global” 全局

npm config set cache "C:\Program Files\nodejs\node_cache" 缓存

4.配置环境变量
我的电脑右击，打开属性->高级系统设置->环境变量->修改PATH变量添加一个值：C:\Program Files\nodejs\node_global ，

如果需要这些全局模块能被项目引用到我们还需要添加一个环境变量，NODE_PATH，值设置为C:\Program Files\nodejs\node_global\node_modules\，这才能确保我们使用require命令导入的时候可以成功导入，因为我们使用npm或者cnpm安装的模块最终都是安装到node_global下的node_modules文件夹下面的。

5导入淘宝镜像
由于有些npm资源被屏蔽或者是国外资源的原因，经常会导致npm安装依赖包的时候失败，所以我们还需要npm的国内镜像----cnpm（淘宝的镜像）在命令行中输入

npm install -g cnpm --registry=https://registry.npm.taobao.org ，然后等待，没报错表示安装成功。

6.安装vue-cli 脚手架建工具
在命令行运行命令npm install -g vue-cli 然后等待安装完成。

在命令行输入 vue –V 查看vuede 版本，不报错则说明vue搭建成功

1、卸载vue-cli 2.x版本

 npm uninstall vue-cli -g

2、安装@vue/cli 3.x版本

 npm install  -g @vue/cli

3、查看版本号

 vue  --version   或者    vue  -V

注：vue 3.X 版本创建目录变为vue create 项目名称 ；启动方式为npm run serve

https://www.cnblogs.com/wxh0929/p/11271551.html

https://blog.csdn.net/xingfei_work/article/details/104768271/

项目的创建
创建项目
在命令行进入项目要存放的文件夹中
在命令行输入vue init webpack XXXX（注：这句，命令是初始化一个项目，webpack是构建的工具，XXXX便是项目名称，初始化的时候会有几个基本的配置选项,创建成功后会在文件夹中找到我们创建的项目）

项目文件夹目录说明：

如果项目中没有node_modules这个依赖包资源可以在命令行输入cnpm install安装一下
运行项目：在命令行输入npm run dev 即可，项目启动后在浏览器输入localhost:8080