vue3项目的创建

环境准备

nodejs
vscode
在正式开发之前，我推荐使用 VS Code 的官方扩展插件 Volar，这个插件给 Vue 3 提供了全面的开发支持。我们可以在vscode里面的扩展市场去快速安装

对于vue2官方推荐使用Vue-cli创建项目；而对于Vue3，我建议使用Vite创建项目，因为使用vite能够提供更好更快的调试体验。
而使用vite的环境，我们只需要有node.js就可以了

接下来我们开始使用vite创建一个vue3 项目

我们在项目文件夹下打开命令行窗口执行 npm init @vitejs/app
根据提示完成项目的初始化
Project name 项目名称
select a framework 这一行我们选择框架的名字这里我们选vue
select a variant 这一行我们为了简单的入门vue3没有使用TS 所以我们还是选择vue

3.我们 cd vite-project 进入项目目录
4. 运行 npm install 安装依赖
5. 安装完成之后 npm run dev 运行项目

项目目录

我们看一下 vite-project 下面的文件目录，这个目录就是我们项目启动的骨架了。目录中的 index.html 是项目的入口；package.json 是管理项目依赖和配置的文件；public 目录放置静态资源，比如 logo 等图片；vite.config.js 就是和 Vite 相关所有工程化的配置；src 就是工作的重点，我们大部分的代码都会在 src 目录下管理和书写，后面我们也会在 src 目录下细化项目规范。

.
├── README.md
├── index.html           入口文件
├── package.json
├── public               资源文件
│   └── favicon.ico
├── src                  源码
│   ├── App.vue          单文件组件
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   └── main.js          入口
└── vite.config.js vite工程化配置文件

现在，项目的架构是下图所示的这个样子，这样我们的项目就拥有了工程化的雏形。我们来从下往上看这个架构：我们所有工程化体系都是基于 Node.js 生态；我们使用 VS Code+Volar 编辑器 + 语法提示工具作为上层开发工具；使用 Vite 作为工程化工具；使用 Chrome 进行调试，这些都是 Vue 3 工程化体系的必备工具。

我们开发的项目是多页面的，所以 vue-router 和 Vuex 也成为了必选项，就像一个团队需要人员配比，Vue 负责核心，Vuex 负责管理数据，vue-router 负责管理路由。我们在 vite-project 目录中使用下面这段代码安装 Vuex 和 vue-router。

npm install vue-router@next vuex@next

规范

├── src
│   ├── api            数据请求
│   ├── assets         静态资源
│   ├── components     组件
│   ├── pages          页面
│   ├── router         路由配置
│   ├── store          vuex数据
│   └── utils          工具函数

我们的页面需要引入路由系统，我们进入到 router 文件夹中，新建 index.js，写入下面的代码：

import {createRouter,createWebHashHistory,} from 'vue-router'import Home from '../pages/home.vue'import About from '../pages/about.vue'const routes = [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: About}]const router = createRouter({history: createWebHashHistory(),routes})export default router

上面的代码中，我们首先引入了 createRouter 和 createWebHashHistory 两个函数。createRouter 用来新建路由实例， createWebHashHistory 用来配置我们内部使用 hash 模式的路由，也就是 url 上会通过 # 来区分。
之后在上面的代码里，我们引入两个组件 Home 和 About，根据不同的访问地址/ 和/home 去渲染不同的组件，最后返回 router 即可。
现在页面就会报错，提示我们找不到 home 和 about 这两个组件，然后我们去 pages 下面新建两个文件就可以了。

注意，这两个文件是以 .vue 作为后缀的，这是 Vue 中单文件组件的写法，我们可以在一个文件中通过 template、script 和 style 来维护 Vue 组件的 HTML、JavaScript 和 CSS。然后我们在 main.js 中，加载 router 的配置：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
createApp(App).use(router).mount('#app')

然后去 App.vue 中，我们删掉 template 之前的代码，加入如下内容：

<template><div><router-link to="/">首页</router-link> | <router-link to="/about">关于</router-link></div><router-view></router-view>
</template>

代码中的 router-link 和 router-view 就是由 vue-router 注册的全局组件，router-link 负责跳转不同的页面，相当于 Vue 世界中的超链接 a 标签； router-view 负责渲染路由匹配的组件，我们可以通过把 router-view 放在不同的地方，实现复杂项目的页面布局。

搭建一个简单的vue3项目相关推荐

1-3.Win10系统利用Pycharm社区版安装Django搭建一个简单Python Web项目的步骤之三
在1-1.Win10系统利用Pycharm社区版安装Django搭建一个简单Python Web项目的步骤之一基础上进行如下操作: 所有路由不能全部都在myDjango下的urls.py路由文件中, ...
eclipse maven项目 class类部署不到tomcat下_Springboot介绍以及用Eclipse搭建一个简单的Springboot项目教程
简述本文主要介绍Springboot以及用Eclipse搭建一个简单的Springboot项目. Springboot简介 Springboot是由Pivotal团队提供的全新框架,其设计目的是用来 ...
使用IDEA搭建一个简单的SpringBoot项目——详细过程
一.创建项目 1.File->new->project: 2.选择"Spring Initializr",点击next:(jdk1.8默认即可) 3.完善项目信息,组名 ...
搭建一个简单Django+vue 项目
简介: Django是python的web开发框架,采用了MTV的框架模式,即模型Model,视图View和模版Template. 各自的职责为: 模型(Model),即数据存取层:如何存取.如何验证 ...
1-2.Win10系统利用Pycharm社区版安装Django搭建一个简单Python Web项目的步骤之二
七.在项目下新建 templates 路径在工程上,右键,添加templates目录注意*: 此目录下即用来存放我们的html文件: 此目录一般是与app的主目录是平级的.当然也可以建立在app的 ...
1-1.Win10系统利用Pycharm社区版安装Django搭建一个简单Python Web项目的步骤之一
首先,安装python3.8和pycharm参考其他教程. 一.安装django 使用下面命令默认安装最新版的django pip install django 使用下面命令可以安装指定版本 pip ...
IDEA搭建一个简单的Javaweb项目（二）
说明: IntelliJ IDEA 版本为2017.2.6 JDK 版本为1.9 tomcat 版本为apache-tomcat-9 mysql版本是MySQL_5_green(链接数据库的默认用户名 ...
SpringBoot搭建一个简单的天气预报系统（一）
章节目录 1. 前言 2. 数据来源 3. 实战 3.1 开发环境 3.2 功能需求 3.3 手动编码 3.3.1 vo层 3.3.2 service层 3.3.3 controller层 3.3.4 ...
如何搭建一个完整的Vue3.0 + ts 的项目
如何搭建一个完整的Vue3.0 + ts 的项目相信9月18日尤大大的关于Vue3.0的发表演讲大家一定有所关注,现在Vue3.0 也已经进入RC阶段(最终产品的候选版本,如果没有问题则可发布成为正 ...

搭建一个简单的vue3项目

vue3项目的创建

环境准备

接下来我们开始使用vite创建一个vue3 项目

项目目录

规范

搭建一个简单的vue3项目相关推荐

最新文章

热门文章