网站建设优選宙斯站长,长春网站开发招聘,银川网站建设哪家好,建设模板类网站文章目录 一、实战概述二、实战步骤#xff08;一#xff09;安装Vue CLI脚手架1、从Node.js官网下载LTS版本2、安装Node.js到指定目录3、配置Node.js环境变量4、查看node版本5、查看npm版本6、安装Vue Cli脚手架7、查看Vue Cli版本 #xff08;二#xff09;命令行方式构建… 文章目录 一、实战概述二、实战步骤一安装Vue CLI脚手架1、从Node.js官网下载LTS版本2、安装Node.js到指定目录3、配置Node.js环境变量4、查看node版本5、查看npm版本6、安装Vue Cli脚手架7、查看Vue Cli版本 二命令行方式构建Vue项目1、创建Vue项目目录2、安装axios模块3、安装vue-router模块4、运行Vue项目5、在浏览器里访问首页 三利用IDEA构建Vue项目1、在IDEA里安装Vue插件2、新建Vue项目3、通过命令启动应用4、在浏览器里访问首页5、图形界面方式启动应用6、在浏览器里访问首页 四Vue项目结构1、首页文件index.html2、根组件App.vue3、主入口文件main.js4、页面组件HelloWorld.vue 五添加一个新页面1、创建Vue组件2、创建路由文件3、修改根组件App.vue4、启动应用程序5、访问不同页面 三、实战总结 一、实战概述 本实战教程详细演示了如何通过Node.js LTS版本安装Vue CLI脚手架工具以及使用命令行和IntelliJ IDEA两种方式创建、配置并运行一个基于Vue 3的前端项目。首先用户需下载安装Node.js LTS版本并确保npm包管理器能全局访问。接着利用npm全局安装Vue CLI创建Vue项目目录并在命令行中初始化新项目选用默认配置包含Vue 3和相关插件。在项目中添加axios和vue-router模块以支持HTTP通信与前端路由功能。 同时教程展示了如何在IntelliJ IDEA中集成Vue开发环境通过IDE内插件新建Vue项目并进行依赖安装、调试等操作。最后教程介绍了Vue项目的典型结构包括入口文件、根组件App.vue、页面组件及其对应的路由配置并实际演示了如何新增页面组件及相应的路由规则成功实现不同页面间的跳转。 整个过程涵盖了从环境搭建到项目启动再到具体功能实现的关键步骤旨在帮助开发者快速上手Vue.js框架理解并掌握其核心概念和技术实践。
二、实战步骤
一安装Vue CLI脚手架
通过集成在Node.js环境中的npm包管理器可以全局安装Vue CLI工具以便快速初始化、搭建和管理Vue.js项目。
1、从Node.js官网下载LTS版本
官网https://nodejs.org/en 下载目前最新版本20.11.0 LTSLTS 是英文 “Long Term Support” 的缩写中文意为“长期支持”。在软件开发领域LTS 版本通常指那些维护周期更长、稳定性更强的软件发行版本。对于开源项目或商业软件而言发布LTS版本意味着开发者会在这个版本上提供一段时间通常超过普通版本的技术支持、bug修复和安全更新但并不一定包含新功能的添加。例如在Node.js社区中LTS 版本被许多企业级用户广泛采用因为它们需要稳定且持续支持的软件环境来保证其业务服务的稳定运行。同样地在Ubuntu等Linux发行版中也有LTS版本供需要长期稳定性的服务器和其他重要设备使用。
2、安装Node.js到指定目录
运行安装程序自定义安装路径为D:\Program Files\nodejs。 安装过程中勾选添加到系统环境变量选项若无此选项则手动配置。 确认安装直至完成。 按提示操作直到完成软件安装 查看Node.js安装目录
3、配置Node.js环境变量
Path: D:\Program Files\nodejs;
4、查看node版本
在命令行窗口里执行命令node -v
5、查看npm版本
在命令行窗口里执行命令npm -v npm(node package manager)是Node.js的包管理器用于安装、共享和管理JavaScript模块依赖简化了开发流程中的版本管理和代码复用。
6、安装Vue Cli脚手架
执行命令npm install -g vue/cli
7、查看Vue Cli版本
查看vue-cliVue CLI版本有两种方式第一种方式直接显示Vue CLI的版本号第二种方式通过全局npm list命令列出所有全局安装的包并通过findstr过滤出包含vue/cli的结果从而获取到版本信息。执行命令vue --version 执行命令npm list -g | findstr vue/cli
二命令行方式构建Vue项目
1、创建Vue项目目录
创建D:\VueProjects目录 在命令行窗口里执行命令vue create login-vue选择Default ([Vue 3] babel, eslint)
2、安装axios模块
Axios 是一款基于Promise的JavaScript库主要用于浏览器和Node.js环境提供了一种简单、高效的方式来处理前端与后端API之间的HTTP通信。它支持创建和发送GET、POST等多种HTTP请求可处理JSON数据自动转换并具有拦截请求/响应、取消请求、设置超时等功能。 Axios遵循Promise API设计易于理解和使用广泛应用于现代Web项目中进行异步数据交互。进入login-vue目录执行命令npm install axios --save
3、安装vue-router模块
Vue Router是Vue.js官方的路由管理器它通过将SPA单页应用的页面切分成多个组件并实现了URL与组件间的映射关系。在Vue项目中通过定义路由规则和嵌套路由Vue Router能够实现视图与URL的同步切换提供前端路由功能支持动态路由、导航守卫等功能为构建复杂单页应用提供了便捷的支持。执行命令npm install vue-router4 --save
4、运行Vue项目
执行命令npm run serve 给出访问应用的网址
5、在浏览器里访问首页
访问http://local:8080
三利用IDEA构建Vue项目
在IntelliJ IDEA中构建Vue项目可通过插件Vue.js支持创建、配置和开发Vue应用无需命令行IDE内一站式完成项目初始化、依赖安装、文件编写与调试。本实战使用IntelliJ IDEA - 2022.3版本
1、在IDEA里安装Vue插件
在IntelliJ IDEA中安装Vue.js插件只需进入Settings/Preferences Plugins搜索Vue.js点击Install并重启IDE即可获得Vue文件类型支持、代码高亮、智能提示等功能。
2、新建Vue项目
项目名称huawei-test-vue 单击【Create】按钮得到初始化Vue项目
3、通过命令启动应用
执行命令npm install 执行命令npm run dev
4、在浏览器里访问首页
在浏览器里访问http://localhost:5173
5、图形界面方式启动应用
在IDEA等集成开发环境中可通过图形界面直接运行package.json中预定义的npm脚本如npm run dev无需手动在终端输入命令启动应用。 在列表中双击dev命令
6、在浏览器里访问首页
在浏览器里访问http://localhost:5174
四Vue项目结构 1、首页文件index.html
在IntelliJ IDEA中创建的Vue项目其首页文件index.html作为项目的入口HTML文件主要包含基础结构及引用打包后的JS和CSS资源由Vue CLI工具自动生成并配置Webpack对Vue应用进行编译加载。
2、根组件App.vue
在Vue.js项目中根组件App.vue是整个单页应用的核心和起点它定义了应用的基本结构和样式。此组件通常包含Vue实例的模板、脚本及样式部分模板部分定义了应用的整体布局脚本部分通过export default导出一个Vue组件选项对象设置数据、计算属性、方法等逻辑样式部分则负责组件内CSS样式。当应用启动时Vue会将App.vue作为顶层组件挂载到index.html的指定DOM元素上进而构建并渲染整个应用视图层次结构。
3、主入口文件main.js
主入口文件main.js是Vue.js项目的核心启动脚本它负责初始化Vue应用并挂载到DOM上。在main.js中首先会通过import语句引入Vue库和其他必要的组件、插件或自定义模块。接着创建一个Vue实例并配置相应的选项如data、components、router和store等。最后调用Vue实例的$mount方法将Vue应用挂载至index.html中的特定元素通常由id为’app’的div标记从而实现整个单页应用的加载与运行。通过main.js开发者可以灵活地组织应用结构、控制全局状态及设置生命周期钩子函数等。
4、页面组件HelloWorld.vue
页面组件HelloWorld.vue在Vue.js项目中代表一个独立、可复用的视图模块。它遵循Vue组件的标准结构由三个核心部分构成模板template、脚本script和样式style。模板部分定义了该组件的HTML结构脚本部分通过export default导出了一个Vue组件对象其中包含组件的数据属性data、计算属性computed、方法methods等逻辑样式部分则为组件内部样式。在实际应用中HelloWorld.vue常作为示例或初始页面展示并可通过props接收父组件传递的数据实现动态渲染和交互功能。
五添加一个新页面
1、创建Vue组件
在components目录下新建一个Vue组件 - BelieveMe.vue
templatediv classwelcome-containerMy Friend, Believe Me~~/div
/templatescript
export default {name: BelieveMe
}
/scriptstyle scoped
.welcome-container {padding: 20px;border: 1px solid #ccc;border-radius: 5px;background-color: #f5f5f5;text-align: center;max-width: 400px;margin: 0 auto;color: red;font-weight: bold;font-size: 30px;
}
/style
2、创建路由文件
创建router目录在里面创建index.js
3、修改根组件App.vue
Vue 3单文件组件SFC使用了script setup语法糖不显式导出任何变量或方法。模板部分包含一个logo图片和动态路由视图样式设置了应用主体的字体、抗锯齿及居中对齐效果。
4、启动应用程序
执行命令npm run dev
5、访问不同页面
http://localhost:5173/believe http://localhost:5173/hello
三、实战总结
本实战教程以Vue CLI为工具指导用户从安装Node.js LTS与Vue CLI开始通过命令行和IntelliJ IDEA创建并配置Vue 3项目。教程演示了依赖管理如axios、vue-router、组件开发及路由配置并展示了Vue项目的基本结构。通过新增页面组件和设置对应路由规则实现不同页面间的跳转功能。该教程全面覆盖了Vue项目从搭建到功能开发的核心步骤为开发者快速掌握Vue.js技术栈提供了详尽实践指导。
