Vue基础-搭建Vue运行环境

简介: 这篇文章介绍了在Vue.js项目中进行开发环境搭建的关键步骤。包括node.js安装和配置、安装Vue及Vue CLI工具、安装webpack模板、安装vue-router、创建Vue项目等步骤。这篇文章为读者提供了清晰的指南,帮助他们快速搭建Vue.js开发环境,为后续的项目开发奠定基础。

这篇文章介绍了在Vue.js项目中进行开发环境搭建的关键步骤。包括node.js安装和配置、安装Vue及Vue CLI工具、安装webpack模板、安装vue-router、创建Vue项目等步骤。这篇文章为读者提供了清晰的指南,帮助他们快速搭建Vue.js开发环境,为后续的项目开发奠定基础。


一、node.js安装和配置

下载地址:Node.js (nodejs.org)

参考我前面的文章:Node.js安装教程 | Damon的学习笔记 (damon-liu.cn)


二、安装Vue及Vue CLI工具

Vue CLI 是一个基于 Vue.js 的官方脚手架工具,用于创建和管理 Vue.js 项目。当执行 npm install @vue/cli 时,它会安装 Vue CLI 的最新版本,并且这个版本中包含了 Vue.js 的依赖。

Vue CLI 除了包含 Vue.js 本身,还提供了一套项目搭建和开发的工具,例如项目初始化、开发服务器、构建工具等。一旦安装完成,您可以使用 vue create 命令来创建新的 Vue.js 项目,并且可以通过 Vue CLI 提供的各种命令和配置来进行项目开发和管理。

简单来说,就是安装Vue CLI工具时包含Vue的安装,不需要单独安装Vue。

命令行输入:

npm install -g @vue/cli

检验是否安装成功:

npm list vue -g#全局查找安装的vue

全局搜索能搜索到Vue,就说明安装成功。


三、安装webpack模板

Webpack 是一个模块打包工具,主要用于将各种前端资源(如JavaScript、CSS、图片等)打包成一个或多个静态文件,以便于浏览器加载。

使用 Webpack 的优势:

  • 模块化开发: Webpack 支持模块化开发,能够将项目拆分成小的模块,使代码更易维护和组织。
  • 资源打包: 可以将多个资源文件打包成一个或多个文件,减少网络请求次数,提高页面加载性能。
  • 代码分割: 支持将代码拆分成多个块,实现按需加载,优化应用的加载速度。
  • 自动化任务: Webpack 提供了强大的插件系统,可以自动执行各种任务,例如代码压缩、图片优化等。
  • 开发服务器: 提供了一个开发服务器,支持热模块替换(Hot Module Replacement),使开发过程更高效。
  • 预处理器支持: 可以集成各种预处理器(如Babel、Sass、Less等),使开发更灵活。

命令行安装webpack,输入:

npm install webpack -g

再安装webpack-cli,命令行输入:

npm install --global webpack-cli

接下来,我们配置环境变量,类似于上面的环境变量设置,我们依然是往系统变量的path里添加我们webpack的安装路径,我们先查看安装路径。

看到webpack的安装路径是:C:\Program Files\nodejs\node_global\node_modules

接着我们添加环境变量:

然后我们检查webpack是否安装成功,命令行输入:

webpack -v

如果有版本信息返回,则说明webpack已经安装成功。


四、安装vue-router

vue-router 是 Vue.js 官方提供的用于在 Vue.js 单页面应用 (SPA) 中实现导航的插件。它允许您通过声明式的方式定义应用的路由,将不同的组件映射到应用的不同URL路径。vue-router 通过监听URL的变化,帮助开发者管理页面的导航、跳转和状态。

以下是 vue-router 的一些主要功能:

  • 声明式的路由配置: 使用 vue-router,您可以在 Vue 组件中声明式地定义路由,使得路由与组件之间的关系更加清晰。
  • 嵌套路由: 支持嵌套路由,允许您在组件内部定义自己的子路由,实现更复杂的页面结构。
  • 动态路由匹配: 支持通过参数匹配路由,使得在URL中的某一部分可以作为参数传递给组件。
  • 导航守卫: 提供了全局的导航守卫,可以在导航发生前、发生时、发生后触发相应的钩子函数,实现路由跳转前的拦截和控制。
  • 状态管理: 可以在路由中保存和管理应用的状态,使得不同路由之间可以共享数据。
  • 懒加载: 支持异步组件加载,可以将组件按需加载,提高应用的性能。
npm install -g vue-router

至此,我的node_modules目录如下:


五、创建并运行Vue项目

我们cd到合适的目录,创建一个测试的vue项目,这里我的测试项目叫 test_vue。

命令行创建项目:

vue init webpack test_vue

模板下载完成之后,系统提示需要我们去选择初始化配置:

等待几分钟,即可初始化完成。

cd到项目目录下,运行项目:

npm run dev

访问Localhost:8080,测试应用是否正常运行。

运行成功,Vue项目搭建成功。

目录
相关文章
|
9天前
|
JavaScript 前端开发 开发者
vue3+ts配置跨域报错问题解决:> newpro2@0.1.0 serve > vue-cli-service serve ERROR Invalid options in vue.
【6月更文挑战第3天】在 Vue CLI 项目中遇到 "ERROR Invalid options in vue.config.js: ‘server’ is not allowed" 错误是因为尝试在 `vue.config.js` 中使用不被支持的 `server` 选项。正确配置开发服务器(如代理)应使用 `devServer` 对象,例如设置代理到 `http://xxx.com/`: ```javascript module.exports = { devServer: {
24 1
|
1天前
|
JavaScript 算法
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
8 1
|
1天前
|
JavaScript
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
6 1
|
2天前
|
JavaScript
vue知识点
vue知识点
10 3
|
3天前
|
JavaScript 前端开发 Java
【vue实战项目】通用管理系统:作业列表
【vue实战项目】通用管理系统:作业列表
16 0
|
3天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
20 2
|
3天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息录入
【vue实战项目】通用管理系统:信息列表,信息录入
10 3
|
3天前
|
JavaScript 前端开发 API
【vue实战项目】通用管理系统:学生列表
【vue实战项目】通用管理系统:学生列表
13 2
|
3天前
|
缓存 JavaScript
【vue实战项目】通用管理系统:首页
【vue实战项目】通用管理系统:首页
10 2
|
3天前
|
JavaScript 前端开发 数据安全/隐私保护
【vue实战项目】通用管理系统:登录页
【vue实战项目】通用管理系统:登录页
11 2

相关实验场景

更多