Vue3.0项目搭建

​

一、开发工具的选择

VSCode，官网下载
VSCode的Win7版本

二、环境准备

1、Node.js

Node.js是一个基于Chrome V8引擎的JavaScript运行环境。

Node.js官方最新版本下载
其他版本Node.js下载

cmd验证是否安装成功：

2、npm

npm是Nodejs自带的一个包管理工具，用来安装各种Node.js的扩展。

查看npm版本：

3、cnpm

使用npm来安装用的是国外的服务器，经常会出现超时错误，可以通过修改为国内的淘宝镜像来加速安装。以后再用到npm的地方直接用cnpm来代替就好了。

安装：

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

验证是否安装成功：

三、创建Vue3.0项目

Vue是前端JavaScript框架，用于构建用户界面。

1、脚手架

前端构建工具。如：Vue-cli、Vite

2、Vue-cli与Vite的区别

1. vue-cli基于webpack封装，生产环境和开发环境都是基于webpack打包
2. vite是基于原生Es6 Modules，在生产环境下打包使用的Rollup
3. 所以两者在生产环境都是基于源代码的文件打包
4. 在开发环境中，Vite是基于原生的es6，无需对代码进行打包，浏览器可以直接调用，所以说vite因为基于浏览器的原生功能，省掉了打包过程，在开发环境中体验极好

3、用Vue-cli创建Vue3.0项目

1. 在想要安装的路径中打开cmd
   
2. 创建项目

npm init vue@latest   //选择项目功能时： 除了第一项的项目名字（我创建的为vue-demo）外，其他可以暂时No

3. 进入你所创建的项目中（vue-demo）

cd < your-project-name >

4. 下载依赖

npm install

5. 运行项目

npm run dev

6. 打包

npm run build

打包后项目文件夹内会生成一个dist目录，该目录一般包含 index.html 文件及 static 目录，static 目录包含了静态文件 js、css 以及图片目录 images（如果有图片的话）

注意：绝对路径与相对路径

4、用Vite创建Vue3.0项目

1. 在想要安装的路径中打开cmd
2. 创建项目（我创建的为vue3-demo）

npm init vite-app < your-project-name >

3. 进入你所创建的项目中（vue3-demo）

cd < your-project-name >

4. 下载依赖

npm install

5. 运行项目

npm run dev

由此可见Vite要比vue-cli更加方便快捷

5、用可视化创建工具来创建项目

1. 通过vue ui命令来打开图形化界面
2. 点击“创建”选项来创建一个项目

四、运行Vue3.0项目

1、在cmd控制台中运行

1. 下载依赖
2. 运行项目

2、在VSCode中的控制台中运行

1. 打开Vue3.0项目所在文件夹
2. 进入项目后，打开控制台（Ctrl+`）
3. 下载依赖
4. 运行项目

3、在可视化创建工具中运行

1. 通过vue ui命令来打开可视化创建工具
2. 打开Vue3.0项目，在dev中点击运行

​