【第1章】Vue环境搭建

已于 2024-07-12 22:44:01 修改
阅读量704 收藏 11
点赞数 8
分类专栏： vue 文章标签： vue.js 前端 javascript
于 2024-06-11 19:53:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44824164/article/details/139392295
版权

文章目录

前言

Vue需要Node环境，开发工具官方推荐的 IDE 配置是 Visual Studio Code + Vue - Official 扩展。。

一、安装Node

1. 下载

在这里插入图片描述

2. 安装

一路Next，这里可以调整安装路径。

在这里插入图片描述

3. 验证

3.1 npm版本与Node.js版本

在这里插入图片描述
更多对应关系请访问官网

3.2 验证环境

node -v
npm -v

在这里插入图片描述

4. npm

npm（Node Package Manager）是Node.js的包管理器，它允许你安装、更新、删除和管理Node.js应用程序的依赖关系。

4.1 安装npm

当你安装Node.js时，npm通常会作为Node.js的一部分一起被安装。

4.2 安装包

使用npm install <package-name>命令来安装包。

4.3 全局安装包

如果你希望将包安装为全局包（可以在任何地方使用），你可以使用-g或–global选项。

npm install -g <package-name>

4.4 更新包

使用npm update <package-name>命令来更新已安装的包。如果你想要更新所有的包，可以使用npm update。

4.5 删除包

使用npm uninstall <package-name>命令来删除已安装的包。

4.6 查看已安装的包

你可以通过查看node_modules目录或运行npm list命令来查看已安装的包。

4.7 初始化package.json

使用npm init命令来初始化一个新的package.json文件，这个文件包含了你的项目的元数据和依赖关系。

5. 国内源

这里我们使用淘宝的源，速度会比较快。

#配置源
npm config set registry https://registry.npm.taobao.org/
#查看配置
npm config get registry

二、安装Visual Studio Code

1.下载

在这里插入图片描述

2.安装

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.安装Vue - Official

打开 Vue - Official 扩展，点击Install
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

或者Ctrl+Shift+x搜索Vue - Official安装
在这里插入图片描述

三、Visual Studio Code自动保存

用习惯了IDEA，文件修改之后它不自动保存，真的难受！
在这里插入图片描述

总结

回到顶部
nodejs
visualstudio

你知道“铁甲小宝”吗丶
关注
  • 8
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
第1章 搭建Vue3开发环境
11-29
搭建Vue3开发环境 在本章中，我们将学习如何搭建Vue3开发环境，包括安装Node.js、WebStorm和Vue DevTools的详细步骤。 1.1 安装Node.js Node.js是一个基于Chrome V8引擎的JavaScript运行环境，简单地说就是运行在...
vue环境搭建、项目初始化
02-03
Vue 环境搭建、项目初始化 在本文中，我们将详细介绍 Vue 环境搭建和项目初始化的过程，从 Node.js 的安装到 Vue 项目的创建，包括了 NPM、Webpack、Vue-CLI 等工具的使用。 一、 Node.js 的安装 Node.js 是一个...
VsCode中高效书写Vue3代码的插件
owo_ovo的博客
03-19 1万+
VsCode中高效书写Vue3代码的插件
vue3【2024版】开发环境搭建（含官网和nvm下载切换最新版node，修改node下载源，创建项目，启动项目，安装vscode插件Vue - Official）
朝阳39的博客
04-17 521
按安装导航，一直 next 即可。node -v。
vscode的Vue - Official插件
听海边涛声
05-14 974
vscode的Vue - Official插件
vue环境的搭建
m0_74331185的博客
12-19 1320
vue环境的搭建
VUE开发环境搭建
weixin_52261391的博客
05-11 5850
vue.js是一套构建用户界面的渐进式框架,Vue 采用自底向上增量 开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，是一个基于MVVM结构的轻量 级框架，非常容易与其它库或已有项目整合。安装vue需要借助npm指令集，所以一般会先安装node.js环境。1.下载node.js环境()打开node.js的官网下载地址：http://nodejs.cn/download/选择适合自己系统的安装包，本文以windows x64系统为例。选择64位安装下载安装包后正常安装，
Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）
热门推荐
逆境清醒的博客
03-19 5万+
Vue3安装配置、开发环境搭建（图文详细），一、vue的主要安装方式，二、node.js安装和配置，三、npm 安装vue 和脚手架、webpack模板，四、打开Vue 项目管理器，五、创建运行 vue 3 项目，六、使用TypeScript进行开发 Vue3 的代码，七、vue及组件的卸载，八、vue项目结构，九、Vue 安装过程中遇到的问题记录
开发环境搭建 2017 标准课程第七章 vue开发环境搭建编写
11-06
开发环境搭建 2017 标准课程第七章 vue开发环境搭建编写webpack.dev一
搭建vue开发环境
12-09
Vue.js的开发依赖于Node.js环境，因此第一步是下载并安装Node.js。访问Node.js官方网站(https://nodejs.org/)，根据你的操作系统选择合适的版本进行下载。安装完成后，通过在命令行输入`node -v`来验证是否安装成功...
vue + element ui 实现侧边栏导航栏折叠收起
爱敲代码的卡拉米的博客
07-08 437
通过 row 和 col 组件，并通过 col 组件的。属性我们就可以自由地组合布局。
vue 切换主题色切换主题色切换主题色切换主题色切换主题色
口袋的天空的博客
07-09 1177
vue切换主题
vue详解
m0_46702681的博客
07-08 1167
指令:HTML标签上带有 v-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能常用指令:v-for 列表渲染，遍历容器的元素或者对象的属性v-bind 为HTML标签绑定属性值，如设置 href，css样式等v-if/y-else-if/v-else 条件性的渲染某元素，判定为true时渲染，否则不渲染v-show 根据条件展示某元素，区别在于切换的是display属性的值。
vue实现预览编辑ppt、word、pdf、excel、等功能的解决方案（内网-前端）
m0_68271787的博客
07-10 684
在Vue中实现预览和编辑PPT、Word、PDF、Excel等文件的功能，尤其是在内网环境下且主要侧重于前端，我们需要明确的是，直接在前端编辑这些格式的文件（特别是PPT和Word）是非常复杂且通常不推荐的，因为这些格式涉及复杂的布局和格式设置。然而，我们可以实现预览功能，并可能通过一些间接方式支持简单的编辑（如表格数据的修改）。下面我将分别给出预览PPT、Word、PDF、Excel文件的Vue组件示例代码，并简要说明如何可能实现简单的编辑功能。
vue 自定义滚动条同步拖动（移动端）
最新发布
u014206461的博客
07-12 99
vue 自定义滚动条同步拖动（移动端）
vue父子组件通信实现模糊搜索功能
全栈码农，专注java项目实战教程分享、大学生项目辅导开发讲解。
07-09 747
模糊搜索功能 每个网站都要用得到
Vue笔记12-新的组件
王劭阳的博客
07-07 350
是一个内置组件，用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成，并可以在等待时渲染一个加载状态，需要结合异步依赖，才能看到效果。在Vue3中，可以没有div根标签，如果没有的话，Vue3会将多个标签包装在一个。在Vue2中，template标签内，必须有一个div标签，作为根标签。是一个内置组件，可以将一个组件内部的模板传送到该组件DOM外部的位置去。
vue3 路由跳转新页面并传递参数与获取参数
Anlittlecat的博客
07-10 276
parmas的形式传参需在路由处定义。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
cc1314_工作、学习有感
07-12 91
通过sm4对文件进行加解密，用户输入密码
cesium + vue2环境搭建
09-03
Cesium是一个用于创建三维地球和地球数据可视化的开源JavaScript库。Vue是一个用于构建用户界面的渐进式JavaScript框架。在搭建Cesium和Vue2环境之前，确保你已经在电脑上安装好了Node.js和npm。 首先，我们需要创建一个新的Vue项目。打开终端或命令提示符，输入以下命令来创建一个新的Vue项目： ``` vue create cesium-vue-demo ``` 接下来，选择手动配置，然后按照默认设置一步一步进行配置。当配置工具询问你是否要选择预设配置或手动选择特性时，请选择手动选择。 然后，在第一项核心功能中选择了Babel、Router和Vuex，第二项选中了CSS Pre-processors，第三项不选择Linter/Formatter。 完成配置后，进入项目目录： ``` cd cesium-vue-demo ``` 然后，我们需要安装Cesium依赖。在终端中输入以下命令： ``` npm install cesium --save ``` 安装完成后，我们需要修改webpack配置，以便正确加载Cesium依赖。打开`vue.config.js`文件，输入以下内容： ```javascript module.exports = { // ... configureWebpack: { output: { // 修改打包后静态文件的路径 publicPath: './' }, amd: { // 添加一个module文件的对外映射关系 toUrlUndefined: true }, // 解决加载Cesium的路径问题 resolve: { alias: { cesium: path.resolve(__dirname, 'node_modules/cesium/Source') } }, // 设置全局变量 plugins: [ new webpack.DefinePlugin({ CESIUM_BASE_URL: JSON.stringify('./') }) ] }, // ... } ``` 然后，我们需要在Vue组件中引入Cesium。在`App.vue`文件中添加以下代码： ```javascript <template> <div id="cesiumContainer"></div> </template> <script> import * as Cesium from 'cesium' export default { mounted() { const viewer = new Cesium.Viewer('cesiumContainer') // 添加Cesium代码 } } </script> ``` 最后，运行以下命令启动Vue项目： ``` npm run serve ``` 现在，你已经成功搭建了一个Cesium和Vue2的环境。你可以在`App.vue`中添加Cesium代码来创建三维地球和地球数据可视化应用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值