Vue3.0环境搭建及部分文件功能解释

最新推荐文章于 2024-07-26 18:21:15 发布
最新推荐文章于 2024-07-26 18:21:15 发布
阅读量926 收藏 3
点赞数 5
文章标签： vue vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40016124/article/details/117826396
版权

文章目录

一、基础环境搭建

安装Node.js

前往Node.js的官网下载LTS版本的Node.js并安装
在这里插入图片描述

安装完成后在命令行中输入

node -v

出现如下界面及成功安装
在这里插入图片描述

安装 npm包管理器

打开终端并进入管理员模式

sudo su

在这里插入图片描述

输入密码后进入管理员模式
在这里插入图片描述

由于国内镜像源较慢，这里使用淘宝的镜像源
打开终端输入如下指令使用淘宝镜像源

npm install -g cnpm --registry=https://registry.npm.taobao.org

如果输入无误会出现如下界面
安装中界面
安装完成
安装完成界面
输入以下指令查看是否安装成功

cnpm -v

安装成功

二、搭建Vue项目环境

全局安装Vue-Cli

  • 更多关于Vue-Cli的详细信息请前往官网获取

在终端中输入

npm install -g @vue/cli

在这里插入图片描述

在这里插入图片描述

安装成功

安装Webpack

Webpack官网

Webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具

npm install --save-dev webpack

在这里插入图片描述

在这里插入图片描述

三、使用Vue-UI创建项目

在命令行中输入vue-ui即可运行具有图形界面的vue项目管理工具
在这里插入图片描述

四、部分文件功能解释

此处使用的软件为PhpStorm，推荐使用Vue-UI
在这里插入图片描述

node_modules： npm 加载的项目依赖模块

src： 开发目录，基本上所有的开发文件源码都在此处，其内包含了几个子文件
assets： 资源目录，放置一些图片或者公共js、css文件。这里的资源会被webpack构建
components： 组件目录，其内部全部为vue组件文件

App.vue： 根组件，即该项目的入口

main.js： 入口js文件，其内存放一些应用于全局的语句，主要用于初始化Vue并使组件能够全局使用

UDK_KL.
关注
vscode搭建vue3.0开发环境
weixin_47863547的博客
11-25 4136
一.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
vue3.0 vue-quill-editor.rar
09-19
在Vue3.0环境下使用Vue-Quill-Editor，需要确保组件与新版本的Vue兼容，以充分利用Vue3.0的改进和提升。 Vue CLI 3 是Vue.js的命令行工具，用于快速搭建Vue项目。它简化了项目配置，提供了开箱即用的脚手架，支持热...
Node.js-vue3.0expressmysql基础开发环境搭建
08-10
vue3.0 express mysql 基础开发环境搭建
vue3.0环境搭建
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
01-30 5874
安装最新版nodejs Node.jshttps://nodejs.org/zh-cn/安装过程非常傻瓜，一直下一步到完成 ---------------------------------------- 然后win+R cmd 输入node -v，我这里安装的是v12.22.4 显示如下信息就代表安装成功了 ---------------------------------------- 然后，安装淘宝镜像npm install -g cnpm registry=https://re
VUE 3.0 如何新建项目 详细教程 附环境搭建 推荐
最新发布
weixin_43483590的博客
07-26 539
本人新入手一台电脑，需要安装各种环境配置，顺便把过程记录一下，方便自己以后查看，也欢迎大家参考交流。
vue3.0环境搭建简单上手
hongyinvjianke的博客
03-15 902
2.安装淘宝镜像 npm install -g cnpm -- registry=https://registry.npm.taobao.org。创建成功，打开VSCode，将创建的todolist文件夹导入到任务栏，然后在终端启动项目npm run serve，默认开启8080端口。package.json：包管理文件，有项目名称、项目版本、是否是私有的、启动脚本、安装的依赖。package-lock.json：所有包的具体信息。babel.comfig.js：配置babel。
VUE 3.0开发环境搭建
lg24k的博客
01-16 514
vue 3.0的环境搭建教程
手把手教你vue3.0项目搭建
weixin_42762167的博客
01-05 1万+
前言：最近公司想重构一个项目，CTO选择了vue3.0 + ant-design-vue技术栈，正好自己也想尝试一下，试着搭建一下，以后有更好的会及时补充修改 注：粗体是命令指令，推荐使用cnpm指令，没有安装淘宝镜像的使用npm（淘宝镜像安装指令：npm install -g cnpm --registry=https://registry.npm.taobao.org） 一、vue（3.0）版本的安装 1.先要安装node.js（在这里就不演示怎么安装nodejs,前面的博客有教程） 官网：https:
vue3.0 搭建项目总结(详细步骤)
10-16
在本文中，我们将深入探讨如何使用Vue 3.0搭建项目，从环境配置到特定功能的实现，每个步骤都将详细阐述，以便为开发者提供全面的参考。 ### 1. 环境配置 在开始一个Vue 3.0项目之前，我们需要确保所有必要的依赖...
SpringBoot2.0+Vue3.0前后端分离wiki文件管理系统源码.zip
05-23
总结来说，"SpringBoot2.0+Vue3.0前后端分离wiki文件管理系统源码"是一个综合性的项目，涵盖了Web开发的多个方面，包括但不限于：前后端分离架构、SpringBoot的RESTful服务、Vue3.0的组件化开发、文件管理功能实现、...
Vue 创建项目后没有 webpack.config.js（vue.config.js） 文件
卡尔特斯
11-09 2万+
Vue 项目中 vue.config.js 文件就等同于 webpack 的 webpack.config.js。 vue-cli3 之后创建的时候并不会自动创建 vue.config.js，因为这个是个可选项，所以一般都是需要修改 webpack 的时候才会自己创建一个 vue.config.js。 开发者一般不需要再去知道 weboack 做了什么，所以没有暴露 webpack 的配置文件，但你依然可以创建 vue.config.js 去修改默认的 webpack。 手动创建一个 vue..
Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）
热门推荐
逆境清醒的博客
03-19 7万+
Vue3安装配置、开发环境搭建（图文详细），一、vue的主要安装方式，二、node.js安装和配置，三、npm 安装vue 和脚手架、webpack模板，四、打开Vue 项目管理器，五、创建运行 vue 3 项目，六、使用TypeScript进行开发 Vue3 的代码，七、vue及组件的卸载，八、vue项目结构，九、Vue 安装过程中遇到的问题记录
搭建Vue3环境以及创建Vue项目
qq_39267979的博客
09-22 252
vue/cli3.0 增加一个可视化项目管理工具，全局安装完成 cli3.0 之后，可以直接在 cmd 输入命令：vue ui 启动即可，地址默认是 localhost:8000 ( 回车后打开 )方法2、基于图形化界面的方式创建 vue 项目 （vue ui）（vue-cli3.x）链接：https://www.jianshu.com/p/2b07fe52f8bb。方法1、输入创建项目语句：vue create 项目名。检查是否安装成功：输出版本号说明安装成功。//安装3.0脚手架。
Vue3.0环境搭建之npm的安装
长路漫漫，以勤作车
02-27 3017
本文主要讲了vue3.0的环境部署，在使用npm原始镜像安装node应用的时候，可能会遇到了超时的问题，文章给出了解决方案，并讲了如何迁移node的本地仓库和缓存。接着讲了node的升级，以及vue脚手架的安装。
Vue3.0项目搭建
weixin_42560974的博客
09-14 957
vue3.0项目搭建
手把手教你搭建 vue 环境(vue-cli 3.0)一
程序猿GTC
12-04 749
vue-cli是什么？ vue-cli 是vue.js的脚手架，用于自动生成vue.js模板工程的。 记住哦：快速建立项目，快速立项！快速立项！快速立项！(重要的事情有说三遍！！！) 那么什么是脚手架呢？官方是这么说的： “脚手架”是一种元编程的方法，用于构建基于数据库的应用。许多MVC框架都有运用这种思想。程序员编写一份specification（规格说明书），来描述怎样去使用数据库；而...
Vue3.0从搭建环境开始
m0_52775179的博客
03-03 475
Vue3.0从搭建环境开始
学习Vue3.0，先从搭建环境开始
wk843620202的专栏
09-01 1092
Bug源测试，上线来几个。愿君多修改，今夜眼难合。这是小编关于Vue3.0系列文章的第二篇，本文将带您从零搭建一个基于Vue3.0与vite的Vue3.0开发环境，通过本文的学习，你将学...
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值