Vue.js 是一个流行的前端JavaScript框架,用于构建用户界面。

001 || 通过CND快速开始

只需要在HTML文件中引入VUE的CDN链接即可

(1)创建HTML文件

<!DOCTYPE html>
<html>
<head>
<title>Vue Quick Start</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!-- 或者使用 Vue 3 的 CDN -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@next"></script> -->
</head>
<body>
<div id="app">
{{ message }}
</div> <script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
</body>
</html>

(2)打开HTML文件,即可

002 || 使用Vue CLI创建项目

这种方法更适用于开发实际的应用程序,它提供了更强大的功能和工具链支持。

(1)安装Vue CLI:首先确保已经安装了Node.js和npm。然后全局安装Vue CLI

npm install -g @vue/cli

(2)创建新项目

  • 初始化项目:运行下面的命令来创建一个新的Vue项目。按照提示选择你需要的功能(如路由、Vuex等)。
# account-manager是项目名称,根据个人需要自行更改。
PS D:\houhuilin\07_project\vuespace> vue create account-manager Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 3] babel, eslint) Vue CLI v5.0.8
Creating project in D:\houhuilin\07_project\vuespace\account-manager.
� Initializing git repository...
⚙️ Installing CLI plugins. This might take a while... > yorkie@2.0.0 install D:\houhuilin\07_project\vuespace\account-manager\node_modules\yorkie > node bin/install.js setting up Git hooks
done > core-js@3.39.0 postinstall D:\houhuilin\07_project\vuespace\account-manager\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}" added 817 packages from 484 contributors in 68.044s 101 packages are looking for funding
run `npm fund` for details � Invoking generators...
� Installing additional dependencies... added 86 packages from 64 contributors in 31.537s 113 packages are looking for funding
run `npm fund` for details Running completion hooks... � Generating README.md... � Successfully created project account-manager.
� Get started with the following commands: $ cd account-manager
$ npm run serve PS D:\houhuilin\07_project\vuespace>
  • 进入项目目录:项目创建完成后,切换到项目目录。
  • 启动开发服务器:使用以下命令启动本地开发服务器。
npm run serve

  • 开发与调试

vue - [02] 安装部署的更多相关文章

  1. vue.js的安装部署+cnpm install 安装过程卡住不动----亲测可用

    1.到Node.js的官网下载node node.js的下载地址,下载完成后,我在d盘新建一个文件夹“node”, 安装到node目录下(安装之后环境变量自动配置了,自己无需再配),比如我的安装路径是 ...

  2. linux vue uwsgi nginx 部署路飞学城 安装 vue

    vue+uwsgi+nginx部署路飞学城 有一天,老男孩的苑日天给我发来了两个神秘代码,听说是和mjj的结晶 超哥将这两个代码,放到了一个网站上,大家可以自行下载 路飞学城django代码#这个代码 ...

  3. kafka详解(02) - kafka_2.11-2.4.1安装部署

    kafka详解(02) - kafka_2.11-2.4.1安装部署 环境准备 下载安装包 官网下载地址:https://kafka.apache.org/downloads.html 2.4.1版本 ...

  4. Zookeeper详解(02) - zookeeper安装部署-单机模式-集群模式

    Zookeeper详解(02) - zookeeper安装部署-单机模式-集群模式 安装包下载 官网首页:https://zookeeper.apache.org/ 历史版本下载地址:http://a ...

  5. 最新版CentOS6.5上安装部署ASP.NET MVC4和WebApi

    最新版CentOS6.5上安装部署ASP.NET MVC4和WebApi 使用Jexus5.8.1独立版 http://www.linuxdot.net/ ps:该“独立版”支持64位的CentOS ...

  6. Greenplum 数据库安装部署(生产环境)

    Greenplum 数据库安装部署(生产环境) 硬件配置: 16 台 IBM X3650, 节点配置:CPU 2 * 8core,内存 128GB,硬盘 16 * 900GB,万兆网卡. 万兆交换机. ...

  7. Hadoop入门进阶课程13--Chukwa介绍与安装部署

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博主为石山园,博客地址为 http://www.cnblogs.com/shishanyuan  ...

  8. Linux系统批量化安装部署之Cobbler

    说明: Cobbler服务器系统:CentOS 5.10 64位 IP地址:192.168.21.128 需要安装部署的Linux系统: eth0(第一块网卡,用于外网)IP地址段:192.168.2 ...

  9. 使用docker安装部署Spark集群来训练CNN(含Python实例)

    使用docker安装部署Spark集群来训练CNN(含Python实例) http://blog.csdn.net/cyh_24/article/details/49683221 实验室有4台神服务器 ...

  10. 日志采集框架Flume以及Flume的安装部署(一个分布式、可靠、和高可用的海量日志采集、聚合和传输的系统)

    Flume支持众多的source和sink类型,详细手册可参考官方文档,更多source和sink组件 http://flume.apache.org/FlumeUserGuide.html Flum ...

随机推荐

  1. 中电资讯-乘风破浪数字经济,银行如何Hold数据?

    近期各类规划密集发布人行金融科技发展规划发布 金融标准化"十四五"规划发布 "十四五"信息化规划发布 -- 和数据应用有关的各项政策密集出炉 数字经济发展中如何 ...

  2. 2024年1月Java项目开发指南2:项目设计

    确定软件架构 1.前端用什么技术,什么框架,什么版本 2.后端用什么技术,什么框架,什么版本 3.用些什么软件,软件版本? 比如: 前端:vue3 + Element-Plus + Axios 后端: ...

  3. 实践解决:IDEA2022版本创建Maven项目时没有出现src目录

    问题:IDEA创建Maven项目时没有出现src目录 创建Maven项目 新版本的IDEA创建是选用的是Maven Archetype,选择这个也是和Maven一样的.按照这样流程创建完成之后的的架构 ...

  4. utf-8 - 如何修复 'character map file ` UTF-8' not found'

    正在设置一个 UBI rhel8 容器.我需要执行这个命令: localedef -f UTF-8 -i en_US en_US.UTF-8 失败了: character map file `UTF- ...

  5. 使用JSch进行sftp的连接运行状况检查

    public boolean checkConnection() throws JSchException { try { JSch jsch = new JSch(); Session sessio ...

  6. 深入理解 Servlet:从基础概念到高级特性与实战应用

    一.Servlet简介与工作原理 Servlet是Java Web开发中的重要组件,它运行在服务器端,用于处理客户端的请求并返回响应.其工作原理涉及多个组件和步骤,从客户端发起请求到服务器端的处理和响 ...

  7. Qt音视频开发系列文章导航

    文章 链接 1-vlc解码播放 https://qtchina.blog.csdn.net/article/details/107742836 2-vlc回调处理 https://qtchina.bl ...

  8. Qt开源作品8-通用控件移动

    一.前言 在做一些项目的过程中,有一种应用场景是需要拖动设备在一个容器中,自由拖动摆放到合适的位置,然后保存对应设备的坐标位置信息,在软件启动好以后自动加载配置好的坐标位置信息,将每个设备移动到对应的 ...

  9. 网络编程懒人入门(十三):一泡尿的时间,快速搞懂TCP和UDP的区别

    本文引用了作者Fundebug的"一文搞懂TCP与UDP的区别"一文的内容,感谢无私分享. 1.引言 网络协议是每个搞网络通信应用开发(比如IM.推送.网关等等)的程序员都必须要掌 ...

  10. functional-requirement

    功能需求 基于GeoServer现有功能,以地图展示和服务管理为核心,实现一张图DEMO. 1. 地图展示 树状展示各种地图服务,并以地图的形式展示出来. 2. 服务管理 树状管理各种地图服务,包括添 ...