01、Vue 3.0开发环境准备

最新推荐文章于 2024-08-24 13:42:14 发布
最新推荐文章于 2024-08-24 13:42:14 发布
阅读量340 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nikeylee/article/details/105586086
版权
本文详细介绍了如何搭建Vue 3.0的开发环境，包括使用Visual Studio Code和Idea作为开发工具，安装nodejs、cnpm、webpack以及Vue CLI 3。文章还涉及了npm和环境变量配置，确保开发者能够顺利开始Vue项目开发。
摘要由CSDN通过智能技术生成

目录

1、前端开发工具

1）开发工具：Visual Studio Code

2）开发工具：Idea

2、前端开发环境准备

npm和cnpm（windows）安装

1）安装nodejs

2）安装cnpm

3）安装webpack

4）安装脚手架Vue CLI 3

1、前端开发工具

1）开发工具：Visual Studio Code

工具下载地址：https://code.visualstudio.com/download，选择User Installer 64 bit下载；

在vs code中快捷键：ctrl + shift +p，输入language，先安装简体中文，再切换到中文版本。

 

2）开发工具：Idea

File-->Settings-->Plugins中，安装插件vue.js

 

2、前端开发环境准备

npm和cnpm（windows）安装

  • npm（node package manager）：nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）；
  • cnpm：利用淘宝镜像来安装依赖包，比npm安装来的速度更快；

 

1）安装nodejs<

最低0.47元/天 解锁文章
nikeylee
关注
专栏目录
vscode搭建vue3.0开发环境
weixin_47863547的博客
11-25 4172
一.node 安装 1.检测node 的安装 node -v 2.检测npm npm -v 3.淘宝镜像 npm i -g cnpm --registry=https://registry.npm.taobao.org 4.检测cnpm cnpm -v 二.安装vue-cli环境支出 cnpm install -g @vue/cli 安装最新的版本 安装完之后检测 vue -V 只要不报错 不是内部命令即可 三.vue 3.0创建项目 vue create 项目 四.启动项目 cnpm r
Vue3Boot:Vue3.0开发的项目
03-17
vue3 初步需要安装yarn 安装之后 纱线安装 运行 毛线发球 打包 纱线结实
Vue3.0学习笔记 开发者工具安装-响应式原理-生命周期-组合式API
好好学习天天向上
04-25 1998
文章目录Vue3.0创建Vue3.0工程使用vue-cli创建 Vue3.0 创建Vue3.0工程 使用vue-cli创建 需要@vue/cli版本在4.5.0以上 # 查看版本 vue --version # 安装或升级@vue/cli npm install -g @vue/cli # 创建vue项目 vue create vue-test # 启动 cd vue_test npm run serve ...
从零开始创建VUE3.0项目
最新发布
qq_41367785的博客
08-24 1062
错误：加载引用“https://json.schemastore.org/package”时出现问题: 无法从“https://json.schemastore.org/package”加载架构: getaddrinfo ENOTFOUND json.schemastore.org。创建的是时候有很多选项，这个根据自己需要来选择，不会的就按照上面来选择即可。错误： 无法找到模块“./components/XXX.vue”的声明文件。当遇到任何错误，看着没有问题，就是报错，那么就重启软件，再试试。
vue-cli3.0配置开发环境，测试环境，线上环境
qq_37055675的博客
12-17 2万+
通过不同命令行切换不同环境api等信息， 例如： npm run dev 调用本地环境api npm run test 调用测试环境api npm run build 调用线上环境api （1）先在package.json文件中添加： "test": "vue-cli-service build --mode test" （2）在项目...
vue3.0环境搭建
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
01-30 5879
安装最新版nodejs Node.jshttps://nodejs.org/zh-cn/安装过程非常傻瓜，一直下一步到完成 ---------------------------------------- 然后win+R cmd 输入node -v，我这里安装的是v12.22.4 显示如下信息就代表安装成功了 ---------------------------------------- 然后，安装淘宝镜像npm install -g cnpm registry=https://re
11、vue3项目开发前的准备工作
伦伦的博客
08-20 1055
vue3项目开发的准备工作 一、安装环境 1、安装node 2、安装cnpm或者配置淘宝镜像源 3、安装vue脚手架 4、安装开发工具 5、安装git或者svn 6、安装postman 二、使用vue脚手架创建项目 1、使用vue-cli创建项目 如：vue create 项目名称 2、使用可视化工具创建项目 如：在终端输入vue ui进入可视化工具 三、安装项目中所需要的插件并且进行相关配置 1、安装axios npm install axios --save //安装 2、安装ui组件element-
Vue3.0配置多页面应用
03-17
在配置和开发Vue3.0多页面应用时，我们还需要关注以下几点： - **路由管理**：每个页面可能有自己的路由配置，可以使用Vue Router或者独立的路由配置。 - **CSS隔离**：为防止样式冲突，每个页面可能需要单独的CSS...
vue3.0环境变量配置.md
04-08
vue3.0环境变量配置大致思路： 1，创建修改相关配置文件（Ctrl + C V即可） 2，封装 axios（根据配置文件，首先判断当前环境，获取对应环境的数据库地址作为当前环境下的基础地址，**拼接到** axios 里面的 url ） 3...
vue 3.0学习笔记(从入门到精通)
10-07
首先，安装Vue 3.0的开发环境是至关重要的。你可以通过npm（Node Package Manager）全局安装Vue CLI的最新版本，命令为`npm I -g @vue/cli@next`。接着，使用`npm init vite@latest project --template vue`来创建一...
vue-cli3.0完整项目demo
09-20
vue-cli3.0完整项目demo，路由配置以及vuex多store配置以及调用，不错的学习资料。
vue3.0 搭建项目总结(详细步骤)
12-09
1.环境配置 项目中的不同开发环境有很多依赖配置，所以可以根据环境设置不同的配置，以免在不同环境经常修改文件 1 在根目录下创建 `.env.[环境]` 文件，可以在不同环境设置一些配置变量，如图   .env.dev 文件 2.eslint 配置 在package.json 文件里面有一个eslintConfig对象，可设置rules： 如图 3.配置svg 在vue.config.js 里面需在module.exports对象里面设置 chainWebpack: config => { config.module.rules.delete('svg') // 重点:删除默认配置中
Vue3.0从搭建环境开始
m0_52775179的博客
03-03 481
Vue3.0从搭建环境开始
Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）
热门推荐
逆境清醒的博客
03-19 7万+
Vue3安装配置、开发环境搭建（图文详细），一、vue的主要安装方式，二、node.js安装和配置，三、npm 安装vue 和脚手架、webpack模板，四、打开Vue 项目管理器，五、创建运行 vue 3 项目，六、使用TypeScript进行开发 Vue3 的代码，七、vue及组件的卸载，八、vue项目结构，九、Vue 安装过程中遇到的问题记录
Vue 3.0 实战，开发基于 Composition API 的 Todo Web App
大补bu的博客
11-28 179
一个简单的、常规的入门示例：待办事项列表。使用了 Vue 3 的 Composition API，为最初级的使用方式。 在线浏览：在线地址 项目地址：项目地址 给个Star
篇章十二 Vue3开发
虎康的博客
07-03 1032
什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。类似于vue2.x中的mixin。自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。创建一个hooks文件夹，里面创建文件import {//实现鼠标“打点”相关的数据 let point = reactive({x: 0 ,y: 0 , });//实现鼠标“打点”相关的方法 function savePoint(event) {
Vue3.0项目的搭建到开发
轻风细雨_林木木
06-27 452
Babel、Router、CSSPre-processors、Vuex和Linter/Formatter。由于这个项目我需要typescript开发，所以再选中一下typescript。是否保存本次配置（保存之后在下次创建项目时即可选择预设置项）使用Babel与TypeScript一起用于自动检测的填充。如果已经安装了旧版的可以通过。卸载后，重新安装最新版本。，自定义自己需要的配置（选择一种css预处理器。使用类风格的组件语法?直接网上下载安装即可。选择代码格式化检测。............
vue3项目（一）项目前的准备
m0_61368323的博客
05-10 416
路由设计原则：找页面的切换方式，如果是整体切换，则为一级路由，如果是在一级路由的内部进行的内容切换，则为二级路由。在styles文件夹里创建element文件，里面创建index.scss文件，里面引入如下的样式。在项目里一些组件共享的色值会以scss变量的方式统一放到一个名为 var.scss 的文件中。3）通知Element采用scss语言，然后导入定制的scss文件覆盖。分类页和Home都是首页中进行切换，所以是首页的子路由。2）在vite.config.js中配置自动导入。
vue3.0开发环境搭建
07-28
要搭建Vue 3.0的开发环境，你需要进行以下步骤： 1. 确保你已经安装了Node.js和npm。你可以在命令行中输入以下命令来检查是否安装成功： ``` node -v npm -v ``` 2. 使用npm全局安装Vue CLI（命令行工具）。在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值