vue3环境搭建、vite命令和vue指令

目录

一、node环境搭建

1、node环境搭建：安装node或者nvm(可以切换node版本)

①安装node步骤：

②安装nvm(可以切换node版本)步骤：

2、用vite和vue两种来构建前端项目(vue脚手架)

（1）采用vite搭建项目

①npm init vite@latest  搭建最新版本的项目

②下载依赖：npm i 

③运行：npm run dev

（2）用vue脚手架搭建项目：

①用npm init vue@latest来创建项目

②安装(下载)依赖：npm i 

③运行：npm run dev

二、需下载的扩展volar以及有关vite命令

三、vue3的模板语句和vue指令

1、vue3的模板语句：vue2+setup语法糖

①vue3可以使用vue2的模板语句，包括定义数据和方法等

②vue3新增加了setup语法糖，应用在script中

2、vue3指令

---

一、node环境搭建

1、node环境搭建：安装node或者nvm(可以切换node版本)

①安装node步骤：

• 直接node官网下16版本的稳定版，18最新的版本有些不稳定。
• 下载完毕用cmd输入命令：node -v           npm -v，说明下载成功。

②安装nvm(可以切换node版本)步骤：

注意：安装nvm有许多坑，比如下载路径不能有空格、不能有中文、如果已经有node版本需要把此版本收录进行或者把之前下的node版本删除重新下载nvm。

下载nvm：

下载完成：在cmd输入命令

nvm

nvm --help   //呼出命令

nvm list available   //查看node所有版本

nvm Install xxx版本号  //下载这个版本号的node

nvm list //查看下载过的node版本

nvm use xxx版本号 //使用node版本的切换

node -v  //查看版本号

node uninstall xxx版本号  //卸载该版本号的node

2、用vite和vue两种来构建前端项目(vue脚手架)

（1）采用vite搭建项目

①npm init vite@latest  搭建最新版本的项目

②下载依赖：npm i 

在VSCode中打开新建的项目，在新建的项目文件的目录终端下，

输入npm install     //下载依赖

执行完npm install后在项目中生成node_modules文件夹：

③运行：npm run dev

在项目目录终端中输入，npm run dev，运行代码如下：

（2）用vue脚手架搭建项目：

①用npm init vue@latest来创建项目

npm init vue@latest

②安装(下载)依赖：npm i 

在VSCode中打开新建的项目，在新建的项目文件的目录终端下，

输入npm i     //安装(下载)依赖

③运行：npm run dev

在项目目录终端中输入，npm run dev，运行代码如下：

二、需下载的扩展volar以及有关vite命令

需要在VSCode扩展中下载：

      volar。

然后就可以编写vue3代码了。

注意：若想编写vue3代码，需要禁用vue的vetur，如下：

注意：两个只能使用一个，vue2和vue3的会有冲突，用一个时需要禁用另一个。

注意：vite

在项目目录终端下执行：

npm run vite   是可以的

vite 是不可以的

三、vue3的模板语句和vue指令

1、vue3的模板语句：vue2+setup语法糖

①vue3可以使用vue2的模板语句，包括定义数据和方法等

②vue3新增加了setup语法糖，应用在script中

解释：vue3新增加了setup(){ ........  return    }，其中方法和定义变量都可以在里面写，但是变量必须要用return出去，才能在页面展示。

解决：用于了setup语法糖，就不用再必须return变量才能显示了。

2、vue3指令

vue3指令的v-model：加ref把变量实现数据响应式，其他的与vue2指令一样。

3、虚拟dom和diff算法：