Vue安装步骤

一、安装Node.js

1、下载

打开下载网站:https://nodejs.org/en/download
如图点击下载:
Vue安装步骤_第1张图片
这是一个安装程序,保存位置随意

2、安装

双击安装程序开始安装,除了选择安装路径的这一页,剩下一路Next
Vue安装步骤_第2张图片
以管理员身份打开cmd,分别运行下面两个命令查看版本,检验是否安装成功:

node -v
npm -v

3、环境配置

1、配置全局安装路径和缓存路径

找个地方创建两个文件夹:node_globalnode_cache
(建议安装到Node.js安装路径中,没有哪个创建哪个)
Vue安装步骤_第3张图片
命令行运行以下两条命令:(注意后面的路径一定要是自己的路径)

npm config set prefix “D:\utils\nodejs\node_global”
npm config set cache “D:\utils\nodejs\node_cache”

2、配置环境变量

打开环境变量页面

  • 在系统变量中新建NODE_PATH,值为D:\Utils\NodeJS\node_modules
    nodejsnode_modules的文件路径,这个文件夹安装之后就会自动生成)
    Vue安装步骤_第4张图片
  • 编辑Path,新建,写入值D:\Utils\NodeJS\node_global
    (上一步创建的全局安装目录node_global的文件夹地址)
    Vue安装步骤_第5张图片

4、安装常用的模块

1、全局安装 cnpm(npm淘宝镜像)

npm install -g cnpm --registry=https://registry.npm.taobao.org

Vue安装步骤_第6张图片
验证

npm config get registry

请添加图片描述
如果显示的不是这个镜像源,可能是安装上了但是npm的镜像源并没有修改,可以运行下面的命令进行修改:

npm config set registry https://registry.npm.taobao.org

安装后就能用cnpm来代替npm进行安装等操作,比较快;
安装失败可能是Node.js版本的问题,可以降低版本再试试。

2、全局安装 webpack

cnpm install webpack -g

3、全局安装 express

cnpm install express -g

二、安装vue-cli

运行命令

cnpm install -g @vue/cli

三、创建Vue项目

1、进入自己创建项目的目录

2、创建项目

运行命令(创建一个名为my-test的Vue项目,可以自定义名称)

vue create my-test

Vue安装步骤_第7张图片
三个选项,前两个是Vue不同版本自动创建,第三个是手动创建,可以根据自己开发所需进行自定义创建
Vue安装步骤_第8张图片

3、运行项目

进入项目目录(运行上述图片中的cd my-test
运行命令

cnpm run serve

Vue安装步骤_第9张图片
访问地址:http://localhost:8080
Vue安装步骤_第10张图片
成功!!!

你可能感兴趣的:(vue.js,npm,node.js)