手机网站做多少钱,给工厂做英文外贸网站,wordpress 会员积分,免费自己做网站软件文章目录 1.前言2.包管理工具npm2.1下载node.js2.2配置 npm 镜像源2.3 npm 常用命令 3.Vite构建工具4.Vue3组件化5.Vue3运行原理 1.前言
本系列文章旨在帮助大家快速上手前端开发。
2.包管理工具npm
npm 是 node.js中进行 包管理 的工具. 类似于Java中的Maven。
2.1下载nod… 文章目录 1.前言2.包管理工具npm2.1下载node.js2.2配置 npm 镜像源2.3 npm 常用命令 3.Vite构建工具4.Vue3组件化5.Vue3运行原理 1.前言
本系列文章旨在帮助大家快速上手前端开发。
2.包管理工具npm
npm 是 node.js中进行 包管理 的工具. 类似于Java中的Maven。
2.1下载node.js
因此要想使用npm,首先要下载node.js。
node.js下载地址: https://nodejs.org/zh-cn
node -v 查看node.js版本npm -v 查看npm版本 2.2配置 npm 镜像源
npm镜像源指的是npm包管理器所使用的替代性服务器用于下载和安装npm包。由于npm的官方源服务器位于美国对于中国或其它网络条件不佳的地区的用户来说直接从官方源下载可能会非常缓慢。为了提高下载速度一些组织和个人提供了npm的镜像源这些镜像源定期与官方源同步以提供相同的服务但更快的下载速度。
以阿里云镜像源举例:
npm config set registry https://registry.npmmirror.com #设置国内阿里云镜像源
npm config get registry #查看镜像源2.3 npm 常用命令 npm init 项目初始化 npm init -y默认一路yes不用挨个输入信息 npm install 包名安装js包到项目中仅当前项目有效。指定 包名或者 包名版本号 npm install -g 全局安装所有都能用可以去 npm仓库 搜索第三方库 npm update 包名升级包到最新版本 npm uninstall 包名卸载包 npm run项目运行
3.Vite构建工具
Vite官网: https://cn.vitejs.dev/
快速创建前端项目脚手架统一的工程化规范:目录结构、代码规范、git提交规范 等自动化构建和部署:前端脚手架可以自动进行代码打包、压缩、合并、编译等常见的构建工作可以通过集成自动化部署脚本自动将代码部署到测试、生产环境等;
使用Vite初始化项目命令:
npm create vite启动项目命令也提示给我们了
cd vite-project
npm install
npm run dev如下: Local:就是项目的url 项目打包命令:npm run build
打包好的项目都在dist目录下 项目部署:
前后分离方式需要把 dist 文件夹内容部署到如 nginx 之类的服务器上。前后不分离方式把 dist 文件夹内容复制到 SpringBoot 项目 resources 下面
4.Vue3组件化
组件化是Vue3架构和设计的核心特性之一它帮助开发者将复杂的应用分解为更小、更可管理的部分。
Vue 3继续支持单文件组件Single File Components这是Vue中组件的主要形式。SFC允许你在一个文件中定义一个组件的所有方面包括模板、脚本和样式。
script setup//编写脚本
/scripttemplate//编写页面模板
/templatestyle scoped//编写样式
/style创建组件: 右键src下的components目录,选择Vue Component,输入组件名即可 在App.Vue中即可完成组件的使用 5.Vue3运行原理
先来看下index.html
!doctype html
html langenheadmeta charsetUTF-8 /link relicon typeimage/svgxml href/vite.svg /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleVite Vue/title/headbodydiv idapp/divscript typemodule src/src/main.js/script/body
/html这个页面很简单,有一个div,id选择器是app.还有script,以模块化的方式引入了src下的main.js
main.js是整个项目模块化的入口
main.js 内容
import { createApp } from vue
import ./style.css
import App from ./App.vuecreateApp(App).mount(#app)解释:
从 Vue 的核心库中导入 createApp 函数导入了style.css导入全局样式表从 ./App.vue 文件中导入根组件。在 Vue 项目中App.vue 通常是最顶层的组件所有其他组件都将嵌套在这个根组件内。使用 createApp 函数创建一个新的 Vue 应用实例并将 App 组件作为其根组件。将应用实例挂载到 HTML 文档中的某个元素上。在这里应用实例被挂载到了 ID 为 app 的元素上。
具体如下图所示
项目中App.vue 通常是最顶层的组件所有其他组件都将嵌套在这个根组件内。
使用 createApp 函数创建一个新的 Vue 应用实例并将 App 组件作为其根组件。将应用实例挂载到 HTML 文档中的某个元素上。在这里应用实例被挂载到了 ID 为 app 的元素上。
具体如下图所示
