vue入门环境安装

一、下载安装最新nodejs

nodejs官网:https://nodejs.org/en/vue入门环境安装_第1张图片

下载后安装选择add to path (自动添加环境变量)

vue入门环境安装_第2张图片


如果安装成功后输入node -v 会输出版本号

vue入门环境安装_第3张图片

二、配置nodejs

安装成功后设置全局文件夹和缓存文件夹便于管理

1、在nodejs安装目录下新建node_cache文件夹和node_global两个文件夹

vue入门环境安装_第4张图片

2、设置缓存文件夹

vue入门环境安装_第5张图片

设置成功后npm i 依赖包名称 -g就会在node_global中

3、设置淘宝镜像

vue入门环境安装_第6张图片

4、配置环境变量

node_global文件夹添加至系统变量

vue入门环境安装_第7张图片

新增系统变量:NODE_PATH(在node_global中的node_modules文件夹)

vue入门环境安装_第8张图片

三、安装vue

安装好nodejs后需要重新打开命令行

npm i vue -g

vue入门环境安装_第9张图片

安装好vue后需要重新打开命令行

vue入门环境安装_第10张图片

安装脚手架

vue入门环境安装_第11张图片

四、创建项目运行

1、新建一个文件夹来存放项目

vue入门环境安装_第12张图片

2、打开命令行进入项目目录

    运行:vue init webpack MyVue( 项目名称)

vue入门环境安装_第13张图片

vue入门环境安装_第14张图片

cd 到项目根目录运行

安装依赖包

npm i(i是install的缩写)

vue入门环境安装_第15张图片


安装依赖完成

运行项目

npm run dev

vue入门环境安装_第16张图片

运行完成后会自动打开浏览器(有些不会)

复制这个网址也能访问

vue入门环境安装_第17张图片

vue入门环境安装_第18张图片


你可能感兴趣的:(vue,vue开发环境)