Vue项目入门

一.配置环境

安装node.js等

二.创建Vue项目

方法1：通过Vue CLI（脚手架）创建Vue项目

在项目目录处通过如下指令创建Vue项目

vue create my-project（项目名）

        项目名处不可缺省，否则会报错

打开项目

cd my-project

运行项目

npm run serve

方法2：通过Vite创建Vue项目

在项目目录处通过如下指令创建Vue项目

create-vite my-project（项目名）

        项目名处可缺省，若缺省则下一步为 “为项目命名”

该步指令的代替：

npm create vite@latest my-project（项目名）

        项目名处可缺省，若缺省则下一步为 “为项目命名”

打开项目

cd my-project

安装依赖

npm install

运行项目

npm run dev

 

三.项目目录介绍

使用Vue CLI（脚手架）创建的Vue项目的项目目录

使用Vite创建的Vue项目的项目目录

 先主要分析使用vite创建的vue项目的结构，其中最重要的有三个文件（加粗）

.vscode：存放Vite 针对 Visual Studio Code（VS Code）编辑器的配置

node_modules：存放项目依赖

public：存放静态资源（例如网站图标）

src：主要存放代码

        assets：存放资源

        components:存放子组件

        App.vue：父组件，又叫根组件

        main.js：项目的核心入口JavaScript文件

        style.css：全局样式文件

.gitignore：说明推送到git仓库时需要忽略的配置

index.html：index.html模板文件

package-lock.json：用于锁定安装时的依赖版本

package.json：项目的配置文件，其中包含了项目的名称、版本号、依赖等信息

README.md：项目介绍文档

vite.config.js：Vite 的配置文件

 

四.运行流程说明

 输入如下指令运行项目之后

npm run serve

main.js导入App.vue，基于App.vue创建结构渲染index.html