Vue第一章:使用VSCode VUE搭建脚手架 实例操作

因为vue3脚手架npm安装,需要预先安装转node.js:

https://nodejs.org/en/download/

Vue第一章:使用VSCode VUE搭建脚手架 实例操作_第1张图片

 

cmd中安装NPM;

安装:npm config set registry http://registry.npm.taobao.org

确认是否安装完毕:npm config get registry

如果安装完成会出现一个地址:http://registry.npm.taobao.org/

配置环境变量:

1、配置PATH和NODE_PATH

a、修改path: D:\Program Files\nodejs\node_global;  --如没有global文件夹,需要新建一个。

b、新增NODE_PATH:D:\Program Files\nodejs\node_global\node_modules

cmd中安装vue全局客户端:npm install -g @vue/cli    回车

第一步:在选择的文件夹内,使用终端命令行的形式安装脚手架:vue-cli:

npm install -g @vue/cli

Vue第一章:使用VSCode VUE搭建脚手架 实例操作_第2张图片

 二、使用脚手架创建项目

vue create mybpm   (注意,项目名称不能大写)

 

 选择安装方式:最后一个(Manually select features)为自定义安装。我们选择自定义安装:

Vue第一章:使用VSCode VUE搭建脚手架 实例操作_第3张图片

 选择我们需要用到的项:

Vue第一章:使用VSCode VUE搭建脚手架 实例操作_第4张图片

选择vue3.0

Vue第一章:使用VSCode VUE搭建脚手架 实例操作_第5张图片

是否需要更改模式:一般不需要,我们这里选择N

回车

Vue第一章:使用VSCode VUE搭建脚手架 实例操作_第6张图片

 Vue第一章:使用VSCode VUE搭建脚手架 实例操作_第7张图片

Vue第一章:使用VSCode VUE搭建脚手架 实例操作_第8张图片

 Vue第一章:使用VSCode VUE搭建脚手架 实例操作_第9张图片

 这里需要注意,一般选择In package.json

Vue第一章:使用VSCode VUE搭建脚手架 实例操作_第10张图片

 是否需要保存项目,一般选择N

Vue第一章:使用VSCode VUE搭建脚手架 实例操作_第11张图片

 之后点击回车:进入安装

 Vue第一章:使用VSCode VUE搭建脚手架 实例操作_第12张图片

 创建成功:

Vue第一章:使用VSCode VUE搭建脚手架 实例操作_第13张图片

三、进入项目

  cd vue3-app
 

四、运行服务

  npm run serve

Vue第一章:使用VSCode VUE搭建脚手架 实例操作_第14张图片

 按照地址访问即可:http://localhost:8080/

Vue第一章:使用VSCode VUE搭建脚手架 实例操作_第15张图片

看到这里,恭喜你,已经搭建成功 

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