vue3.0教程——搭建Vue脚手架【简化版】

2023-11-07

目录

哈喽,大家好丫,你们的小郭子又来啦 ~

一、环境要求

(1)node安装(前端开发环境)

 (2)vue-cli脚手架安装

二、安装依赖

 (1)使用命令行安装以下依赖

(2)通过 vue ui 命令以图形化界面来管理项目依赖

(3)导入你刚刚项目的地址​编辑

 (4)导入后,选择依赖

(5) 安装依赖

(6)全部依赖下载完成后,引入到项目,并且编写demo 

 三、引入依赖

(1)router/index.js

(2)store/index.js

(3)main.js

(4)最终效果

 四、创建一个项目

(1)指令

(2)选择Vue3模板

 (3)创建和依赖下载

(4)进入目录,启动项目

(5)查看项目 

哈喽,大家好丫,你们的小郭子又来啦 ~

今天来聊一聊Vue3的项目搭建问题。

话不多说,直接上干货,嘻嘻嘻 ~

                                

一、环境要求


(1)node安装(前端开发环境)

  1.     打开node官网:https://nodejs.org/zh-cn/
  2.     下载node并安装(安装vue3建议node在10.0版本以上)。
  3.      输入node -v可显示node版本 

如图所示:

 (2)vue-cli脚手架安装

全局安装npm install -g @vue/cli 

 出现版本号表示安装完成了, 如下显示安装成功

                                           

二、安装依赖


 (1)使用命令行安装以下依赖

npm install vuex  vue-router  element-plus  axios   -S

npm install less less-loader@5.0.0  -D

npm install vuex  vue-router  element-plus  axios   -S
npm install less less-loader@5.0.0 -D

(2)通过 vue ui 命令以图形化界面来管理项目依赖

vue ui

(3)导入你刚刚项目的地址

 (4)导入后,选择依赖

(5) 安装依赖

(注意区分运行和开发依赖区别)

 

(6)全部依赖下载完成后,引入到项目,并且编写demo 

                                        

 三、引入依赖

(1)router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'
import guide from '../views/guide.vue'
 
 
const routes = [
  {
    path: '/',
    redirect: '/guide'
  },
  {
    path: '/guide',
    name: 'guide',
    component: guide
  },
  {
    path: '/login',
    name: 'login',
    component: () => import(/* webpackChunkName: "about" */ '../views/login.vue')
  }
]
 
const router = createRouter({
  history: createWebHashHistory(),
  routes
})
 
export default router

(2)store/index.js

import { createStore } from 'vuex'
 
export default createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

(3)main.js

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import store from './store'
import less from 'less'
 
createApp(App).use(store).use(router).use(ElementPlus).use(less).mount('#app')

(4)最终效果

 四、创建一个项目

(1)指令

运行以下命令来创建一个新项目

vue create portal

(2)选择Vue3模板

 (3)创建和依赖下载

(4)进入目录,启动项目

 创建完成 ,进入目录,启动项目 :cd portal ;npm run serve  

(5)查看项目 

浏览器查看项目 :ctrl+单击网址

到这里我们就创建了一个vue3的demo项目(开不开心,嘻嘻嘻) 

好啦,今天的分享到这里就结束啦 ~

觉得我分享的文章不错的话,可以关注一下哦,嘻嘻嘻

 

                                       

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue3.0教程——搭建Vue脚手架【简化版】 的相关文章

  • 在 Node.js 中生成带条形码的 pdf

    我在用https github com devongovett pdfkit https github com devongovett pdfkit生成 PDF 文件 我可以简单地使用类似的方法 app get get pdf req re
  • 使用 Ajax Jquery post 请求进行 Json 劫持

    昨天 我读了一些关于如何预防的好文章使用 Asp Net MVC 进行 Json 劫持 http haacked com archive 2009 06 24 json hijacking aspx 规则是 永远不要通过 get 请求发送
  • 有没有办法动态更改 jqGrid 的单元格值?

    这个问题可能已经被问过很多次了 但我想知道是否可以动态更改 jqgrid 的单元格值 我基本上有一个网格 它通过 JSON 字符串加载数据 在特定列的某些行上 该值可能为 null 因此 预先知道哪个行 ID 是一个问题 然后能够将 nul
  • 判断字符串是否包含有效的javascript代码

    我正在寻找一个C 返回的函数true如果字符串包含有效的 JavaScript 语法 例如 IsValidJavascript alert hello 会回来true but IsValidJavascript alertXXhelloZ
  • 检测 Webkit/Chrome 中 HTML5 数字控件更改的事件?

    HTML5 为我们提供了一些新的输入元素 例如
  • onClick 处理程序在每个渲染周期触发

    我有这样的默认状态 this state selectedTab tab1 then 我的渲染方法是这样的 render const selectedTab this state return li tab1 li li tab2 li d
  • 如何将一个数组中的所有项目复制到另一个数组中?

    如何将数组的每个元素 其中元素是对象 复制到另一个数组中 以便它们完全独立 我不想更改一个数组中的元素来影响另一个数组 这里的关键是 数组中的条目是对象 并且 您不希望对一个数组中的对象的修改显示在另一个数组中 这意味着我们不仅需要将对象复
  • 检查用户设备的 GPS 是否开启

    我正在使用 jQuery Mobile 和 PHP 开发一个应用程序 我没有使用 Phonegap 或其他框架 我需要找到用户的geolocation 如果用户设备的 GPS 关闭 那么我无法获取位置 现在我需要查找用户设备的 GPS 是否
  • 使用javascript以编程方式触发iOS safari中的复制菜单?

    我正在尝试实现一种用户友好的方式 将一些文本从文本输入字段复制到 iOS Safari 上的剪贴板 我知道无法在这个平台上以编程方式完成此操作 但我希望能够尽可能地指导用户体验 在 iOS Safari 上 当用户手动突出显示某些文本时 会
  • 如何显示接下来的三个图像单击加载更多按钮

    我需要一个加载更多按钮来显示图像 页面加载时 我显示 3 个图像 单击 加载更多 按钮后 接下来的 3 个图像将显示在屏幕上 我尝试了下面的代码 但它不起作用 你能帮我解决这个问题吗 function item slice 0 2 show
  • 如何在 Vuejs 中加载 Pixi 实例?

    我正在 VueJS 组件中学习 PixiJS 如下所示Pixi教程 https github com kittykatattack learningPixi我控制台显示此错误 vue runtime esm js 2b0e 619 Vue
  • Chrome --app 相当于 Firefox\IE

    我有一个网络应用程序 客户要求单击不同按钮时更改浏览器窗口大小 我发现在那link https stackoverflow com questions 13436855 launch google chrome from the comma
  • 播放没有音频标签的音频

    是否可以在没有音频标签的情况下仅使用 javascript 播放音频 我通过 tinyMce 编辑器注入脚本 因为我无权访问网站的后端 并且它不支持客户端的音频标签 她只想要当您将鼠标悬停在图像上时发出简单的声音 我已经完成了所有设置 但是
  • Svelte 条件元素类报告为语法错误

    我正在做一个if块每if 块的精简指南 https svelte technology guide if blocks 这看起来很简单 但 Svelte 认为这是一个语法错误 svelte plugin ParseError Unexpec
  • 如何从 CSS 选择器中提取类名?

    故事 我目前正在构建一个 ESLint 规则 以警告在 CSS 选择器定位器中使用引导布局导向和角度技术类 目前我在字符串方法中使用简单的子字符串 for var i 0 i lt prohibitedClasses length i if
  • 为什么 call 比 apply 快那么多?

    我想知道是否有人知道why call比apply 在 Chrome 中 速度大约快 4 倍 在 Firefox 中快 30 倍 我什至可以制作自定义原型 apply2 在大多数情况下 运行速度是apply 这个想法取自角度 Function
  • 如何将MathJax公式转换为img

    Mathjax 现在在我的项目中运行良好 但有一个问题 有没有办法将MathJax的公式 纯html和css 转换成img文件 我可以保存 MathJax 可以配置为生成 SVG 看http docs mathjax org en late
  • 如何在 React Native 中使用相同的 Firebase 数据库在两个应用程序之间进行通信?

    我有两个不同的应用程序使用相同的实时数据库 在第一个应用程序中 我发送的订单包含一些要保存在数据库中的数据字段 在另一个应用程序中 我只添加一个侦听器 firebase database ref userOrder currentUser
  • 如何在 TypeScript 中使用 navigation.replace ?

    我试图在我的代码中使用它 const navigation useNavigation navigation replace AllFriends 但我不断收到错误消息 Property replace does not exist on
  • 为什么 JavaScript 中是 [1,2] + [3,4] = "1,23,4" ?

    我想将一个数组的元素添加到另一个数组中 所以我尝试了以下方法 1 2 3 4 它的回应是 1 23 4 到底是怎么回事 The 操作员没有为数组定义 发生的事情是 JavaScript将数组转换为字符串并将它们连接起来 Update 由于这

随机推荐

  • Python——hashlib

    hashlib模块 hashlib是一个提供字符加密功能的模块 包含MD5和SHA的加密算法 具体支持md5 sha1 sha224 sha256 sha384 sha512等算法 该模块在用户登录认证方面应用广泛 对文本加密也很常见 模块
  • jni编写时的教训(函数签名不对应)

    最近由于项目结构上的调整 原先我的模块位于APP层 通过aidl hidl调用到native层的c 的服务的接口 用于更新EMMC上的文件内容 需要改为 C 服务更新EMMC上文件内容的代码封装成jni的so库 由我的模块去调用 由于jni
  • Python---字典添加元素

    1 8 5 cvar 字典 特点 1 符号 2 关键字 dict 3 保存元素是 key value 一对 定义 dict1 空字典 dict2 dict 空字典 dict3 ID 123156489795 name lucky age 1
  • VUE---7.事件&循环

    目录 一 事件 二 按键 1 按键修饰符 内置 2 自定义修饰符 event key 3 系统修饰符 4 组合修饰符 三 循环 一 事件 1 绑定事件 2 event事件对象 3 修饰符 stop 阻止冒泡 prevent 阻止默认事件 c
  • 华为服务器近端连接显示绿屏,故障诊断说明 - 华为服务器 iMana 200 用户指南 26 - 华为...

    MCE Error Diagnose DIMMxxx memory fault is doubted of this error Error Handling Suggestion Please shut down system and c
  • Rancher2.x入门教程

    1 x教程请参考上篇 容器管理Rancher1 x及监控工具入门 1 简介 为了更好的管理Kubernetes Rancher的大部分功能经过重新设计 并且Rancher2 0延续了大多数1 0版本的友好功能 如简洁的UI和应用商店等 2
  • nohup和screen的比较

    在实际工作中 我们ssh等到远程的Linux上 运行一个程序 但是当我们关闭掉我们的连接终端断开ssh后 刚才运行着的程序也会自动被中断结束 当ssh连接断开后 如何让我们的程序继续在后台运行呢 下面介绍我常使用的两个方法 A 使用nohu
  • Qt简易闹钟

    配置文件 QT core gui texttospeech greaterThan QT MAJOR VERSION 4 QT widgets CONFIG c 11 The following define makes your comp
  • Leetcode 632最小区间

    632 最小区间 难度 困难 标签 哈希表 双指针 字符串 Description 你有 k 个 非递减排列 的整数列表 找到一个 最小 区间 使得 k 个列表中的每个列表至少有一个数包含在其中 我们定义如果 b a lt d c 或者在
  • linux top详解

    语法 root incloudos logs top h procps ng version 3 3 10 Usage top hv bcHiOSs d secs n max u U user p pid s o field w cols
  • nginx服务器

    一 介绍 Nginx engine x 是一个高性能的HTTP和反向代理服务器 也是一个IMAP POP3 SMTP服务 Nginx是由伊戈尔 赛索耶夫为俄罗斯访问量第二的Rambler ru站点 俄文 开发的 第一个公开版本0 1 0发布
  • 【算法/剑指Offer】如何得到一个数据流中的中位数?如果从数据流中读出奇数个数值,那么中位数就是所有数值排序之后位于中间的数值。

    题目描述 如何得到一个数据流中的中位数 如果从数据流中读出奇数个数值 那么中位数就是所有数值排序之后位于中间的数值 如果从数据流中读出偶数个数值 那么中位数就是所有数值排序之后中间两个数的平均值 我们使用Insert 方法读取数据流 使用G
  • Angular4.0_数据绑定和管道

    单向数据绑定 使用插值表达式将一个表达式的值显示在模板上 h1 productTitle h1 事件绑定 使用小括号将组建控制器的一个方法绑定为模板上一个事件的处理器
  • ROS机器人语音模块

    ROS机器人语音模块 文章目录 ROS机器人语音模块 零 乘骐骥以驰骋兮 来吾道夫先路 壹 路漫漫其修远兮 吾将上下而求索 贰 苟余情其信姱以练要兮 长顑颔亦何伤 叁 不吾知其亦已兮 苟余情其信芳 肆 虽体解吾犹未变兮 岂余心之可惩 末 亦
  • 【仿真】Carla介绍与使用 [1] (附代码手把手讲解)

    0 参考与前言 主要介绍无人驾驶的仿真环境CARLA 开源社区维护 以下为相关参考链接 Carla官方文档 建议后续找的时候 先按好版本号 有些功能 api 是新版本里有的 Carla官方github Youtube Python Wind
  • vue css >>> , /deep/ 深度选择器

    vue引用了第三方组件 有时候我们需要改写第三方组件的样式 而又不想去除scoped属性造成组件之间的样式污染 此时只能通过 gt gt gt 穿透scoped 有些Sass 之类的预处理器无法正确解析 gt gt gt 这时可以使用 de
  • stm32 利用链表和定时器动态实现led等器件周期性控制

    stm32 esp8266 ota系列文章 stm32 esp8266 ota 快速搭建web服务器之docker安装openresty stm32 esp8266 ota升级 tcp模拟http stm32 esp8266 ota升级 h
  • 初探 ModBus4j -简单使用指南

    目录 前言 开发环境 工具准备 具体实现 下载Modbus4j 解决空指针异常 解决数组越界 测试 测试环境准备 正式测试 前言 之前提到过 由于项目需求 需要封装 ModBus协议 ModBus协议较早 网上开源开源库也不少 可参见 Mo
  • STM32驱动8266-----8266AP模式

    找了很久 一直没有找到驱动的程序 查一些资料 字写了一个简单程序 记录分享一下 void esp8266 inittcp void printf AT CIPMODE 2 r n 设置AP模式 delay ms 10000 延时函数 pri
  • vue3.0教程——搭建Vue脚手架【简化版】

    目录 哈喽 大家好丫 你们的小郭子又来啦 一 环境要求 1 node安装 前端开发环境 2 vue cli脚手架安装 二 安装依赖 1 使用命令行安装以下依赖 2 通过 vue ui 命令以图形化界面来管理项目依赖 3 导入你刚刚项目的地址