搜狐快站,代推广app下载,苏州室内设计学校,公司做网站的费用怎么记账目录
环境配置
Vue 3.0 脚手架#xff08;Vite#xff09;安装
node版本查询与切换 创建一个vue应用 Vue Router安装
安装vue-router4
配置路由
安装配置
展示路由
Element UI安装
安装element-plus
引入element-plus
使用element-plus
用户登录 环境配置
Vue 3…目录
环境配置
Vue 3.0 脚手架Vite安装
node版本查询与切换 创建一个vue应用 Vue Router安装
安装vue-router4
配置路由
安装配置
展示路由
Element UI安装
安装element-plus
引入element-plus
使用element-plus
用户登录 环境配置
Vue 3.0 脚手架Vite安装 node版本查询与切换 首先需要着重强调的是您的电脑必须成功安装 Node.js 并且建议安装的版本为 18.3 及以上。您能够通过在终端或者命令提示符中输入“node -v”这一指令便捷地对已安装的 Node.js 版本进行查验。 倘若您期望列出当前系统中已安装的所有 Node.js 版本此时可以巧妙地运用 nvm也就是 Node Version Manager节点版本管理器所提供的相关命令具体操作如下
nvm ls 21.6.2 * 14.17.3 (Currently using 64-bit executable) 假如您打算使用 Node.js 的 21.6.2 版本只需执行如下命令nvm 便会将当前的 Node.js 版本无缝切换至 21.6.2
nvm use 21.6.2
Now using node v21.6.2 (64-bit) 关于当前安装的 Node.js 版本的详细信息呈现情况如下所示
node -v
v21.6.2 创建一个vue应用 创建的项目将采用基于 Vite 的构建设置这一设置为我们运用 Vue 的单文件组件 (SFC) 提供了极大的便利和灵活性。首先创建一个全新的项目目录并在该目录中打开终端。接着在命令行中运行“npm create vuelatest”命令。当您在安装 Vue 脚手架的过程中看到“Ok to proceed?”这一提示时它通常是在询问您是否确定要继续当前的操作。在此情况下您只需在键盘上输入“y”即可确认继续。 具体情况如下所示
npm create vuelatest
Need to install the following packages:
create-vue3.10.4
Ok to proceed? (y) y 接下来将会安装并执行“create-vue”它是由 Vue 官方所提供的项目脚手架工具。在这个过程中您将会看到一系列诸如 TypeScript 和测试支持等可选功能的提示。倘若您对于是否开启某个特定功能不太确定那么直接按下回车键选择“ No ”即可。 具体情况如下所示
Vue.js - The Progressive JavaScript Framework √ Project name: ... QIANDUANJIDI-CMS
√ Package name: ... qianduanjidi-cms
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes
√ Add Vue DevTools 7 extension for debugging? (experimental) ... No / Yes Scaffolding project in D:\后台管理系统\QIANDUANJIDI-CMS... Done. Now run: 在项目成功创建之后您需要按照以下步骤来安装依赖
cd .\QIANDUANJIDI-CMS\
npm install added 1 package, removed 39 packages, changed 5 packages, and audited 32 packages in 3m 4 packages are looking for funding run npm fund for details found 0 vulnerabilities 最后启动开发服务器
npm run dev qianduanjidi-cms0.0.0 dev vite VITE v5.4.0 ready in 458 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h enter to show help 备注 在选择功能模块时如果您对某个功能在未来的需求不太明确建议先选择“ No ”。这样做可以避免引入不必要的复杂性使项目保持相对简洁和易于管理。而在安装依赖的过程中可能会由于网络状况不稳定或其他各种因素导致一些包的安装出现问题。此时您可以根据具体的错误提示信息采取相应的、有针对性的解决措施以确保项目的顺利推进。 运行结果 Vue Router安装 安装vue-router4 打开终端切换至您的 Vue 项目所在的目录。接下来使用如下命令来安装 Vue Router
npm install vue-router4 在安装过程中显示如下信息
added 2 packages, and audited 34 packages in 3s 5 packages are looking for funding run npm fund for details found 0 vulnerabilities 配置路由 创建一个名为 router.js 的文件并在其中进行路由配置
// 首先从 vue-router 库中导入 createRouter 函数和 createWebHistory 函数
import { createRouter,createWebHistory } from vue-router; // 然后引入自定义的组件 Home 和 About
import Home from /components/home/index.vue;
import About from /components/about/index.vue; // 接下来定义路由规则
const routes [ { path: /home, component: Home }, { path: /about, component: About }
]; // 随后创建 router 实例
const router createRouter({ history:createWebHistory(), routes
}); // 最后将创建好的 router 实例导出以便在其他模块中使用
export default router; 分析 首先从 vue-router 库中引入了两个极为关键的函数分别是用于创建路由实例的 createRouter 函数以及用于设定路由历史模式的 createWebHistory 函数。这为后续的路由配置奠定了基础。 紧接着导入了两个精心自定义的组件即 Home 和 About。这两个组件在后续的路由配置过程中将扮演重要角色作为路由路径所对应的实际展示内容。 之后通过 routes 数组清晰地定义了两条路由规则。每条路由规则都精准地涵盖了路径path以及与之紧密相对应的组件component。这确保了在不同的路径访问时能够准确加载对应的组件实现页面内容的切换和展示。 接着借助 createRouter 函数成功创建了一个路由实例 router 。在创建过程中将路由的历史模式配置为基于浏览器历史的 createWebHistory 并将之前精心定义的路由规则数组 routes 准确无误地传递给了该路由实例。这使得路由实例能够根据规则进行页面的跳转和管理。 最后将创建完成的路由实例 router 进行导出。如此一来它便能够在其他模块中得以灵活使用。通常情况下会在 Vue 应用的入口文件中进行注册和运用从而实现整个应用的路由功能。 总的来讲这段代码出色地完成了 Vue Router 的基础配置工作。不仅条理清晰地定义了路由规则还精心创建出了能够在整个应用里稳定使用的路由实例为应用的页面导航和内容展示提供了坚实的架构支持。 安装配置 在main.js中安装路由
import { createApp } from vue
import App from ./App.vue
import router from ./router createApp(App)
.use(router)
.mount(#app) 分析 首先从 vue 库中精准地导入了 createApp 函数。同时从本地文件 ./App.vue 中引入了根组件 App并从 ./router 成功载入了路由配置对象 router 。这为后续的应用创建和配置做好了充分的准备。 接下来创建了一个 Vue 应用实例并将 App 组件明智地设定为根组件。这确立了应用的基础架构和初始展示内容。 而后向此应用实例巧妙地注册了路由功能。这一关键步骤使得应用能够依据事先定义好的路由规则实现页面的流畅切换与精彩展示为用户提供丰富的交互体验。 最后将 Vue 应用挂载至页面中 id 为 app 的 DOM 元素上。这一操作确保了应用能够在指定的页面位置完美呈现与用户进行有效的互动和交流。 总的来讲这段代码实现了 Vue 应用的创建、路由的注册以及应用的挂载操作。通过这一系列精心设计的步骤确保了整个 Vue 应用能够在指定的页面位置正常运转和交互为用户带来优质的使用体验。 展示路由 在 App.vue 中使用 router-view 来展示当前路由的组件
template router-view/router-view
/template script
export default {};
/script style scoped
/style 分析 在 template 标签内部router-view 乃是由 Vue Router 所提供的一个独特的占位符组件。其作用至关重要当路由规则成功匹配到对应的组件时被匹配的组件内容就会在此处进行渲染并予以精彩展示。 综上所述这段代码构成了一个 Vue 组件的基础架构。其核心要点在于巧妙地借助 router-view 实现对路由匹配组件内容的动态呈现为应用的页面切换和内容更新提供了高效的实现方式。 运行结果 首页http://localhost:5173/home 关于页面http://localhost:5173/about Element UI安装 安装element-plus 在 Vue 项目中首先要打开终端并准确无误地切换至项目所在的目录。接下来就可以通过以下命令来安装 Element UI、 若选择使用 NPM 此命令会借助 NPM 包管理器将 element-plus 精准地安装到项目之中并将其妥善地作为项目的依赖予以保存。
npm install element-plus --save 若决定使用 Yarn Yarn 同样具备出色的能力能够顺利地完成 element-plus 的安装工作并将其精准地添加到项目的依赖列表当中。
yarn add element-plus 若倾向于使用 pnpm pnpm 也完全可以实现 element-plus 的顺畅安装。
pnpm install element-plus 引入element-plus 在 main.js 文件中开展 Element UI 的引入操作 首先将 element-plus 模块引入进来并加载其对应的样式文件。
import ElementPlus from element-plus
import element-plus/dist/index.css 然后进行注册通过.use() 方法将 ElementPlus 成功注册到 Vue 应用之中使其能够在整个应用范围内被有效使用从而为项目提供丰富多样的 UI 组件和精美时尚的样式。
createApp(App)
.use(ElementPlus) 总结 如此一来就圆满地完成了 element-plus 的安装和引入工作为构建拥有精美界面的 Vue 应用奠定了坚实的基础。 使用element-plus 在 Vue 中运用部分 Element UI 的组件例如构建了一个简易的 Vue 组件呈现出了一个标题以及一个具备数据绑定内容的按钮并且对相关数据进行了定义。借由这样的方式达成了组件内部数据与视图的交互。以此来检测其安装是否成功以及功能是否处于正常状态。 代码如下
template div h2这是首页/h2 el-button{{ message }}/el-button /div
/template script
export default { data(){ return { message:Hello Element Plus } }
};
/script style scoped
/style 运行结果 用户登录
详见下一章节
