Vue脚手架构建项目

目录

一、使用Vue脚手架(vue-cli)构建Vue项目

1、安装或升级脚手架

2、进入工作目录创建Vue项目

3、进入项目目录，启动项目

4、项目目录：

(1)public目录：静态资源文件夹.index.html是vue项目启动的首页

(2)src目录：源码文件夹

二、使用Vite构建工具构建Vue项目

1、进入工作目录执行以下指令

2、进入项目目录，安装依赖

3、启动项目

三、WebStorm中创建Vue项目(使用Vite构建工具)

1、在WebStorm中安装vite插件

2、使用vite创建Vue项目

3、配置npm运行环境

4、创建组件：

5、Vue3中新增的特性：

(1)组合式API：setup

(2)初始化函数：ref。作用是初始化组件中使用的变量。语法是：

(3)构建响应式数据方法：reactive。作用是将数据打包成对象

(4)Vue3的计算属性：

(5)Vue3的setup语法糖：不需要使用exports default进行组件的默认导出

四、Vue组件之间的通信

1、组件之间的关系：

(1)父子关系：

---

一、使用Vue脚手架(vue-cli)构建Vue项目

1、安装或升级脚手架

npm install -g @vue/cli

2、进入工作目录创建Vue项目

vue create 项目名称

3、进入项目目录，启动项目

npm run serve

4、项目目录：

(1)public目录：静态资源文件夹.index.html是vue项目启动的首页

(2)src目录：源码文件夹

|-- assets目录：静态资源、测试数据

|-- components目录：存放Vue组件(组件扩展名是.vue)

|-- App.vue组件：主组件(启动组件)

|-- main.js文件：核心文件。使用App.vue创建Vue组件,将该组件挂载到index.html的div上

二、使用Vite构建工具构建Vue项目

1、进入工作目录执行以下指令

npm init vite-app <project-name>

2、进入项目目录，安装依赖