一、安装node.js

在node.js官网下载安装最新版的：https://nodejs.org/zh-cn/

然后需要更换下载源为国内的

#设置为淘宝源
npm config set registry https://registry.npmmirror.com#查看下载源
npm config get registry

二、安装Vue3脚手架

npm init vue@latest
#初始化安装一个VUE3项目

这个命令会安装和执行 create-vue，它是 Vue 提供的官方脚手架工具。
跟随命令行的提示继续操作即可，我选择了装上TypeScript。

项目的目录结构如下：

tsconfig.json文件各字段吐血整理

三、源码文件的目录结构

四、项目运行简介

index.html首页入口

main.ts是项目入口文件

//本文件为入口核心文件
import { createApp } from 'vue'     //创建一个Vue应用
import App from './App.vue'         //导入根组件
import router from './router'       //导入路由组件import './assets/main.css'          //导入CSS样式表const app = createApp(App)          //使用根组件创建应用实例app.use(router)                     //使用路由组件app.mount('#app')                   //挂载到index.html的app容器

App.vue根组件（这是一个SFC单文件组件 script脚本+html模板+style样式表）

五、路由的使用

在创建项目的时候选择了安装路由，Vue已经自动为我们生成的路由用法的页面

路由配置文件 ruoter/index.ts

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'    //引入自定义的视图文件（比如首页和关于页面）const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',      //路由URLname: 'home',   //路由名称component: HomeView //要渲染的组件（展示在前端页面）},{path: '/about',name: 'about',// 路由级别代码分割// 为这个路由生成一个单独的 chunk// 当访问路由时他是懒加载的component: () => import('../views/AboutView.vue')}]
})export default router

视图文件 HomeView.vue

<script setup lang="ts">
import TheWelcome from '../components/TheWelcome.vue' //引入自定义的Vue组件，组件中实现具体功能
</script><template><main><TheWelcome />  <!-- 前端渲染组件 --></main>
</template>

Vue渲染前端页面的过程如下：

Vue.app读取main.ts的配置（包括引入CSS样式表），根据路由跳转链接渲染路由视图
要渲染的视图HomeView.vue 引入自定义组件，并渲染自定义vue组件

六、学习资源

官方手册

VUE官方文档：https://cn.vuejs.org
TypeScript手册：https://bosens-china.github.io/Typescript-manual/

Vue名词解释

SFC

Vue 单文件组件 (Single-File Component，缩写为 SFC) SFC
是一种可复用的代码组织形式，它将从属于同一个组件的 HTML、CSS 和 JavaScript 封装在使用 .vue 后缀的文件中。

Vite

Vite 是一个轻量级的、速度极快的构建工具，对 Vue SFC 提供第一优先级支持。替代Webpack 的打包工具。

VUE语法和函数

ref：用于存储值的响应式数据源
v-bind:id :id 属性绑定
v-on:click @click 点击事件监控
v-model 双向数据绑定

部署到Github pages

npm run build
git checkout -b gh-pages
git add -f dist
git commit -m 'first commit'
git subtree push --prefix dist origin gh-pages

项目配置需要做些修改

① Vue3开发环境搭建相关推荐

从零开始使用 Webpack 搭建 Vue3 开发环境
从零开始使用 Webpack 搭建 Vue3 开发环境前情提要从零开始使用 Webpack 搭建 Vue 开发环境创建项目首先需要创建一个空目录,在该目录打开命令行,执行 npm init - ...
Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）
Vue3安装配置.开发环境搭建(组件安装卸载)(图文详细) 本文目录: 一.vue的主要安装使用方式二.node.js安装和配置 1.支持运行 Node.js的平台 2.Node.js 版本开发发布 ...
Android环境搭建和Android HelloWorld—Android开发环境搭建
Android_Android开发环境搭建-搭建Android的开发环境 1.我考虑先下载JDK7.0,在JDK的安装中,考虑一般SDK都是向上兼容的,于是选择了最高的版本7.0 这里是我总结的详细的 ...
qt工程在linux系统里颜色显示错误_【飞凌嵌入式RK3399开发板试用体验】+QT开发环境搭建测试（二）...
作者:飞扬的青春在拿到开发板之后,已经体验了Android操作系统,接下来就是体验Linux下的开发,本次以QT的一个小案例来测试下. 首先是自己先搭建了一个Ubuntu18．04的虚拟机,使用真机 ...
Go：分布式学习利器（1） -- 开发环境搭建 + 运行第一个go程序
文章目录为什么要学习 go 开发环境搭建 -- MAC 运行第一个go程序 go 函数的返回值设置 go 函数的命令行参数为什么要学习 go 在如下几个应用场景的需求下产生了go: 超大规模分布式 ...
智能合约开发环境搭建及Hello World合约
如果你对于以太坊智能合约开发还没有概念(本文会假设你已经知道这些概念),建议先阅读入门篇. 就先学习任何编程语言一样,入门的第一个程序都是Hello World.今天我们来一步一步从搭建以太坊智能合约 ...
iPhone开发环境搭建全过程 iPhone手机开发内容，中文手册
http://3g.edu.csdn.net/kecheng/iphone.html iPhone手机开发内容 http://www.docin.com/p-34874880.html# iPhon ...
python搭建numpy_python开发环境搭建及numpy基本属性-【老鱼学numpy】
目的本节我们将介绍如何搭建python的开发环境以及numpy的基本属性,这样可以检验我们的numpy是否安装正确了. python开发环境的搭建工欲善其事必先利其器,我用得比较顺手的是Intel ...
windows下pomelo开发环境搭建及JS乱码问题
from: http://blog.csdn.net/wangqiuyun/article/details/9243263 最近一直在研究node.js这一块,为的就是使用网易的pomelo框架,学习 ...

① Vue3开发环境搭建

一、安装node.js

二、安装Vue3脚手架

三、源码文件的目录结构

四、项目运行简介

五、路由的使用

六、学习资源

官方手册

Vue名词解释

VUE语法和函数

部署到Github pages

① Vue3开发环境搭建相关推荐

最新文章

热门文章

① Vue3开发环境搭建

一、安装node.js

二 、安装Vue3脚手架

三、源码文件的目录结构

四、项目运行简介

五、路由的使用

六、学习资源

官方手册

Vue名词解释

VUE语法和函数

部署到Github pages

① Vue3开发环境搭建相关推荐

最新文章

热门文章

二、安装Vue3脚手架