Vue创建Demo项目

2023-11-08

Vue创建Demo项目

Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。

npm
npm 版本需要大于 3.0,如果低于此版本需要升级

# 查看版本
npm -v

#升级 npm
cnpm install npm -g

# 升级或安装 cnpm
npm install cnpm -g

在用 Vue.js 构建大型应用时推荐使用 cnpm 安装,cnpm 能很好地和 Webpack 或 Browserify 模块打包器配合使用

# 最新稳定版
cnpm install vue@next

命令行工具
Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。

对于 Vue 3,应该使用 npm 上可用的 Vue CLI v4.5 作为 @vue/cli。若要升级,应该需要全局重新安装最新版本的 @vue/cli

全局安装 vue-cli
yarn global add @vue/cli
或
cnpm install -g @vue/cli

安装完后查看版本:

vue --version

然后在 Vue 项目中运行:

vue upgrade --next

注意:vue-cli 3.x 和 vue-cli 2.x 使用了相同的 vue 命令,如果之前已经安装了 vue-cli 2.x,它会被替换为 Vue-cli 3.x。

如果仍然需要使用旧版本的 vue init 功能,可以全局安装一个桥接工具:

npm install -g @vue/cli-init
# vue init的运行效果将会跟 vue-cli@2.x 相同

使用 vue init webpack命令创建一个项目

vue init webpack project-name

在这里插入图片描述

以上命令安装完成之后,继续执行以下命令

cd project-name
npm run dev

执行成功返回:Your application is running here: http://localhost:8080,浏览器打开此url:
在这里插入图片描述
使用图形化界面
可以通过 vue ui 命令来打开图形化界面创建和管理项目:

vue ui

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

使用 vue init vite-app命令创建一个项目

Vite 是一个 web 开发构建工具,由于其原生 ES 模块导入方式,可以实现闪电般的冷服务器启动。
通过在终端中运行以下命令,可以使用 Vite 快速构建 Vue 项目,语法格式如下:

npm init vite-app project-name

在这里插入图片描述

以上命令创建完项目之后,运行项目

cd project-name
npm install
npm run dev

执行成功返回:Local:http://localhost:3000/,浏览器打开此url:
在这里插入图片描述

使用 vue create 命令创建项目

vue create 命令创建项目语法格式如下

vue create [options] project-name

创建一个由 vue-cli-service 提供支持的新项目:

options 选项可以是:
-p, --preset <presetName>: 忽略提示符并使用已保存的或远程的预设选项
-d, --default: 忽略提示符并使用默认预设选项
-i, --inlinePreset <json>: 忽略提示符并使用内联的 JSON 字符串预设选项
-m, --packageManager <command>: 在安装依赖时使用指定的 npm 客户端
-r, --registry <url>: 在安装依赖时使用指定的 npm registry
-g, --git [message]: 强制 / 跳过 git 初始化,并可选的指定初始化提交信息
-n, --no-git: 跳过 git 初始化
-f, --force: 覆写目标目录可能存在的配置
-c, --clone: 使用 git clone 获取远程预设选项
-x, --proxy: 使用指定的代理创建项目
-b, --bare: 创建项目时省略默认组件中的新手指导信息
-h, --help: 输出使用帮助信息

创建项目

vue create project-name

在这里插入图片描述
以上命令创建完项目之后,运行项目

cd project-name
npm run serve

执行成功返回:Local:http://localhost:8080/,浏览器打开此url:
在这里插入图片描述

项目创建成功,用vscode打开创建好的项目
在这里插入图片描述
代码目录解析
在这里插入图片描述
参考文章:
Vue3 安装

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

Vue创建Demo项目 的相关文章

随机推荐

  • java calendar getactualmaximum_Calendar类的getActualMaximum方法作用(获得某月份实际天数)...

    首先我们看api中对getActualMaximum这个方法的说明 Calendar Java 2 Platform SE 6 public int getActualMaximum int field 给定此 Calendar 的时间值
  • zxing二维码的生成与解码(C#)(附例子)

    二维码的生成 using com google zxing qrcode using com google zxing using com google zxing common using ByteMatrix com google zx
  • 论文笔记-深度估计(2) Fully Convolutional Networks for Semantic Segmentation

    1 介绍 该文讲述的是语义分割 但思路和框架和深度恢复是十分相似的 毕竟当前语义和深度问题本质上是一个像素级的分类问题 从该文3000 引用用量也可见该文章的巨大启发效果 所谓全卷积网络 是指由仅由卷积层 池化层和非线性激活函数层交错组织起
  • Tensorflow报错:AttributeError: 'module' object has no attribute 'summary'

    这是因为API的版本不对 导致AttributeError module object has no attribute summary 想想并没有修改什么 只是服务器被重装了驱动 会不会是这个原因呢 对了 同事说在服务器上装了tensor
  • SectionList 嵌套FlatList实现Grid和Flat列表

    直接上代码 遇到问题查解决方法的时候还是先看官方文档把 百度的博客实在是坑啊 特别是那个某博客的有个sectionlist简直了 sectionlist里竟然来个numColumns 明明没有的事也不知道他哪里偷的文档 结果苦逼的研究半天
  • CSDN 软件开发新手赛正式启动,召集热爱编程的你

    2021年12月21日起 CSDN软件开发新手赛正式启动 此次大赛是基于 C认证 见习工程师能力认证 标准而设立的编程比赛 只要你想成为Java Python 前端 全栈工程师 无论你是职场小白 在校学生还是编程爱好者 皆可免费报名参与 大
  • 安装mmcv

    安装MMCV 创建虚拟环境gupao 并激活 nvcc V 查看cuda版本 打开当前项目文件主页查看环境配置Prerequisites MMPretrain 1 0 1 documentation 4 安装合适的torch版本 原来的版本
  • 【数据分析】Python:处理缺失值的常见方法

    在数据分析和机器学习中 缺失值是一种常见的现象 在实际数据集中 某些变量的某些条目可能没有可用的值 处理缺失值是一个重要的数据预处理步骤 在本文中 我们将介绍如何在 Pandas 中处理缺失值 我们将探讨以下内容 什么是缺失值 如何在 Pa
  • Java之String类

    作者简介 zoro 1 目前大二 正在学习Java 数据结构等 作者主页 zoro 1的主页 欢迎大家点赞 收藏 加关注哦 Java之String类 String的构造 String底层 String之间的比较 比较内容 比较地址 字符串查
  • [用python辅助学生中考与高考-3]:中考科技特长生知多少

    目录 前言 1 什么是科技特长生 2 科技特长生政策正在覆盖全国 3 科技特长生招生流程 1 制定章程 2 考生报名 考生自主报名 3 专业加试 考试 4 预录取 5 上报名单 6 名单公示 7 参加考试 8 正式录取 4 如何布局中考科技
  • 毕业设计-基于 MATLAB 的图像边缘检测算法的研究和实现

    目录 前言 课题背景和意义 实现技术思路 一 MATLAB概述 二 图像边缘检测 实现效果图样例 最后 前言 大四是整个大学期间最忙碌的时光 一边要忙着备考或实习为毕业后面临的就业升学做准备 一边要为毕业设计耗费大量精力 近几年各个学校要求
  • 2021-11-24 qt 串口

    这货跟vb 比 就系更方便了 打完收工
  • 正则表达式 匹配以特定字符串开头 到任意第一个字符中间的空格

    lt p style text indent 2em S 正则表达式 匹配以特定字符串开头 到任意第一个字符中间的空格 lt p p style text indent 2em u4e00 u9fa5 正则表达式 匹配以特定字符串开头 到任
  • 2021年的保研之旅总结

    保研之旅 个人情况介绍 1 学校 末流211 2 专业 信息管理与信息系统 信管算管理学位 保研的时候有的时候会被认为是跨保的 3 绩点 1 36 4 比赛获奖 没有什么拿得出手的获奖 只有一些小奖 全国大学生物联网设计竞赛全国一等奖 美国
  • robotframework-ride安装注意点

    欢迎关注 无量测试之道 公众号 回复 领取资源 Python编程学习资源干货 Python Appium框架APP的UI自动化 Python Selenium框架Web的UI自动化 Python Unittest框架API自动化 资源和代码
  • Server2008R2:由于没有远程桌面授权服务器可以提供许可证,远程会话被中断.的解决方法,求大神们指导

    出现 由于没有远程桌面授权服务器可以提供许可证 远程会话被中断 问题是因为微软默认的远程登录只提供120天的使用期限 解决该问题的具体步骤如下 1 打开运行 在运行中输入注册表命令 regedit 然后回车通过命令打开注册表对话框 2 在注
  • 获取windows中活跃的Com口

    获取windows中活跃的Com口 记录于2021年11月9日 今天对我来说是个很特殊的一天 母胎SOLO二十一周年 无奈 Orz 闲暇之余写下此文章 记录一下我的日常 文章目录 获取windows中活跃的Com口 前言 一 如何寻找活跃C
  • “另一个程序正在使用此文件,进程无法访问”的解决方法

    另一个程序正在使用此文件 进程无法访问 的解决方法 参考文章 1 另一个程序正在使用此文件 进程无法访问 的解决方法 2 https www cnblogs com shiningrise archive 2012 12 02 279812
  • apache 2.4 配置php,Apache2.4 PHP 配置

    Apache2 4服务器 http www apachehaus com cgi bin download plx APACHE24VC14 64位 http www apachehaus com cgi bin download plx
  • Vue创建Demo项目

    Vue创建Demo项目 Vue 发音为 vju 类似 view 是一款用于构建用户界面的 JavaScript 框架 它基于标准 HTML CSS 和 JavaScript 构建 并提供了一套声明式的 组件化的编程模型 帮助你高效地开发用户