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. The 2nd GUAT Collegiate Programming Contest (Round 1)

    第二届 GUAT大学生程序设计大赛 第一场 题解(A-M) 前言 比赛的内容主要包括计算机科学的常用算法,基本的计算理论,(如:离散数学,具体数学,组合数学基础),数据结构基础,程序设计语言(规定是C ...

  2. openEuler欧拉使用rc.local实现开机自启动

    ​设置权限 chmod 775 /etc/rc.local 普通的单条是,直接写在rc.local里 /usr/local/nacos/bin/startup.sh -m standalone 复杂点 ...

  3. 05C++数据类型

    一.单精度实数float 教学视频A 例程1:金字塔的底是正方形,侧面由四个大小相等的等腰三角形构成.试编一程序,输入底和高,输出三角形的面积. #include <iostream> / ...

  4. jmeter接口测试 -- 连接数据库（MySQL）

    三个步骤 一.下载MySQL的连接驱动 1.先查看MySQL的版本 1)服务器上查看:mysql --version 2)在连接工具上查看 2.下载连接驱动,下载地址:https://dev.mysq ...

  5. Qt/C++音视频开发75-获取本地有哪些摄像头名称/Qt内置函数方式

    一.前言 在需要打开本地摄像头的场景中,有个需求绕不开,那就是如何获取本地有哪些摄像头设备名称,这样可以提供下拉框给用户选择,不然你让用户去填设备名,你觉得用户会知道是啥,他会操作吗?就算你提供了详细 ...

  6. Qt音视频开发36-超时检测和自动重连的设计

    一.前言 如果网络环境正常设备正常,视频监控系统一般都是按照正常运行下去,不会出现什么问题,但是实际情况会很不同,奇奇怪怪七七八八的问题都会出现,就比如网络出了问题都有很多情况(交换机故障.网线故障. ...

  7. AI 与 Mermaid 使用教程之流程图 - 从入门到精通

    本文由 Mermaid中文文档 整理而来,并且它同时提供了一个 Mermaid在线编辑器,支持在线编辑与生成流程图. 在文章的末尾我们将介绍如何使用AI来自动生成 Mermaid 流程图. Merma ...

  8. 内存吞金兽(Elasticsearch)的那些事儿 -- 架构&三高保证

    系列目录 内存吞金兽(Elasticsearch)的那些事儿 -- 认识一下 内存吞金兽(Elasticsearch)的那些事儿 -- 数据结构及巧妙算法 内存吞金兽(Elasticsearch)的那 ...

  9. k8s列出所有未配置探针的deployment

    在 Kubernetes 中,探针(Probes)用于检测容器的健康状态,主要包括以下三种: Liveness Probe(存活探针):检测容器是否正在运行. Readiness Probe(就绪探针 ...

  10. 15个Linux Grep命令使用实例（实用、常用）

    Grep命令主要用于从文件中查找指定的字符串.首先建一个demo_file: 复制代码 代码如下: $ cat demo_fileTHIS LINE IS THE 1ST UPPER CASE LIN ...