VS code上创建Vue项目详细化教程2-配置并创建Vue项目

目录

1. 环境准备

1.1 Node.js环境配置

1.1.1 安装Node.js

1.1.2 Node配置全局安装目录：

1.2 安装Vue-cli

2. 工程化Vue项目创建

2.1 命令行形式

2.2 UI 界面（我们此处采用UI模式）

2.2.1 在文件目录下终端输入

2.2.2 创建新项目

2.2.3 进行配置选择，可根据需要自行选择

2.2.4 选择Vue版本与语法规范

2.2.5 不保存预设

3. Vue项目基础知识简介

 3.1 Vue目录结构详解​编辑​

3.2 启动Vue项目的两种方式

3.3 Vue项目更改端口号配置

3.4 成功启动项目

---

前端工程化过程：

1. 环境准备

搭建Vue项目使用的是Vue-cli 脚手架，在此之前需要准备Node.js环境，就像Java开发要依赖JDK环境一样。

1.1 Node.js环境配置

注意：Node.js安装 （安装到没有中文的目录下）
Node下载链接https://nodejs.org/en/download/

1.1.1 安装Node.js

(Windows下载完安装包选择路径然后下一步就可以了。)

Mac可以使用Homebrew安装更简单，执行命令即可：

brew install nodejs

 安装后检查版本：

node -v

​

1.1.2 Node配置全局安装目录：

Windows以管理员身份运行终端，将下面的路径改为你Nodejs安装的路径即可：

npm config set prefix "E:\develop\NodeJs"

(Mac自动配置，可略过。)

检查配置：

npm config get prefix 

后续下载若觉得网速慢可改为淘宝镜像（可先跳过）：

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

以上Node.js环境配置就完成了。

1.2 安装Vue-cli

npm install -g @vue/cli

安装结束后检查：

vue --version  

​

以上整个Vue所需要的环境即安装完成。

2. 工程化Vue项目创建

创建有两种方式：

2.1 命令行形式

vue create vue-project01

2.2 UI 界面（我们此处采用UI模式）

2.2.1 在文件目录下终端输入

vue ui

​

会弹出图形化界面，若没弹出则输入终端中url进行访问：

​

2.2.2 创建新项目

​

2.2.3 进行配置选择，可根据需要自行选择

​

​

2.2.4 选择Vue版本与语法规范

​

2.2.5 不保存预设

​

​

创建完成！
 

3. Vue项目基础知识简介

​

 3.1 Vue目录结构详解​

3.2 启动Vue项目的两种方式

​1.运行

3.3 Vue项目更改端口号配置

如下添加红框中的配置即可：​

​

3.4 成功启动项目

​

首页展示的其实就是项目中默认的APP.vue组件：