快速上手VUE：创建、运行、发布，HelloWorld-Toy模板网

这篇具有很好参考价值的文章主要介绍了快速上手VUE：创建、运行、发布，HelloWorld。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、创建VUE项目

1、打开VS“创建新项目”界面，选择“基于 Vue.js Web 应用程序”。

分为Javascript和TypeScript两种，注意按自己的编程语言掌握情况选择用哪种。（TypeScript是Javascript的超集，兼容Javascript所有语法，不过由于我还未写过TypeScript，稳妥考虑，先选Javascript。）

顺便提一下，我按此方法创建的项目为Vue2.6.12，不是最新版Vue3，后续需注意版本。

快速上手VUE：创建、运行、发布，HelloWorld

2、填写项目名称和地址。

快速上手VUE：创建、运行、发布，HelloWorld

3、打开“\src\App.vue”文件，发现连“Hello World!”都已经帮我们写好了，直接开始运行出来看看吧。

快速上手VUE：创建、运行、发布，HelloWorld

二、运行

1、按下win+r，并输入cmd。

2、使用“盘符:”与“cd 文件夹名”进入项目根目录。

 E:
 cd /其它/VuejsApp1

DOS Code

快速上手VUE：创建、运行、发布，HelloWorld

3、输入以下命令，等待运行结束即可。（如果报错，继续往下看；注意网页不是自动打开的，需要自己手动复制网址，在浏览器中打开。）

 set NODE_OPTIONS=--openssl-legacy-provider
 npm run serve

快速上手VUE：创建、运行、发布，HelloWorld

三、发布

输入以下命令，等待运行结束即可（打包结果在项目根目录的dist文件夹内；如果报错，继续往下看）。

 set NODE_OPTIONS=--openssl-legacy-provider
 npm run build

快速上手VUE：创建、运行、发布，HelloWorld

四、运行和发布中的报错解决

目前遇到的错误为两种：

1、模块或依赖缺失，建议直接运行下面命令自动检测与安装。

npm i

2、Error: error:0308010C:digital envelope routines::unsupported，在执行命令前先输入以下命令（例如：set NODE_OPTIONS=--openssl-legacy-provider && npm run serve）。

Linux & Mac OS (windows git bash)
    export NODE_OPTIONS=--openssl-legacy-provider
windows命令提示符:
    set NODE_OPTIONS=--openssl-legacy-provider

出现这个错误是因为Node.js V17+中的OpenSSL3.0对允许算法和密钥大小增加了严格的限制。

五、BAT执行

为了方便，也可在项目根目录创建BAT文件执行命令：

::快捷调试.BAT

::本BAT必须放置于项目文件夹里，例如项目VuejsApp1的文件夹：E:\其它\VuejsApp1

@echo off

echo.
echo node.js V17+版本中的OpenSSL3.0对允许算法和密钥大小增加了严格的限制，可能会对生态系统造成一些影响，需要做以下设置：
echo     Linux
echo     Mac OS (windows git bash)：
echo         export NODE_OPTIONS=--openssl-legacy-provider
echo     Windows命令提示符：
echo         set NODE_OPTIONS=--openssl-legacy-provider

echo.
echo 查看 Node.js 版本号：
echo     node -v

echo.
echo 查看 JavaScript包管理工具 版本号：
echo     npm -v

echo.
echo 开发环境调试用指令，能够在修改页面后自动刷新同步网页：
echo     npm run serve

echo.
echo 开发环境发布用指令（打包后的文件夹为dist，在项目根目录）：
echo     npm run build

::执行
start cmd /k "set NODE_OPTIONS=--openssl-legacy-provider && echo. && echo set NODE_OPTIONS=--openssl-legacy-provider 设置成功 && echo. && echo node -v && node -v && echo. && echo npm -v && npm -v && npm run serve"

echo.
echo （当前窗口可关闭）

::pause

BAT Code

::快捷发布.BAT

::本BAT必须放置于项目文件夹里，例如项目VuejsApp1的文件夹：E:\其它\VuejsApp1

@echo off

echo.
echo node.js V17+版本中的OpenSSL3.0对允许算法和密钥大小增加了严格的限制，可能会对生态系统造成一些影响，需要做以下设置：
echo     Linux
echo     Mac OS (windows git bash)：
echo         export NODE_OPTIONS=--openssl-legacy-provider
echo     Windows命令提示符：
echo         set NODE_OPTIONS=--openssl-legacy-provider

echo.
echo 查看 Node.js 版本号：
echo     node -v

echo.
echo 查看 JavaScript包管理工具 版本号：
echo     npm -v

echo.
echo 开发环境调试用指令，能够在修改页面后自动刷新同步网页：
echo     npm run serve

echo.
echo 开发环境发布用指令（打包后的文件夹为dist，在项目根目录）：
echo     npm run build

::执行
start cmd /k "set NODE_OPTIONS=--openssl-legacy-provider && echo. && echo set NODE_OPTIONS=--openssl-legacy-provider 设置成功 && echo. && echo node -v && node -v && echo. && echo npm -v && npm -v && npm run build"

echo.
echo （当前窗口可关闭）

::pause

BAT Code

::快捷CMD.BAT

::本BAT必须放置于项目文件夹里，例如项目VuejsApp1的文件夹：E:\其它\VuejsApp1

@echo off

echo.
echo node.js V17+版本中的OpenSSL3.0对允许算法和密钥大小增加了严格的限制，可能会对生态系统造成一些影响，需要做以下设置：
echo     Linux
echo     Mac OS (windows git bash)：
echo         export NODE_OPTIONS=--openssl-legacy-provider
echo     Windows命令提示符：
echo         set NODE_OPTIONS=--openssl-legacy-provider

echo.
echo 查看 Node.js 版本号：
echo     node -v

echo.
echo 查看 JavaScript包管理工具 版本号：
echo     npm -v

echo.
echo 开发环境调试用指令，能够在修改页面后自动刷新同步网页：
echo     npm run serve

echo.
echo 开发环境发布用指令（打包后的文件夹为dist，在项目根目录）：
echo     npm run build

::执行
start cmd /k "set NODE_OPTIONS=--openssl-legacy-provider && echo. && echo set NODE_OPTIONS=--openssl-legacy-provider 设置成功 && echo. && echo node -v && node -v && echo. && echo npm -v && npm -v"

echo.
echo （当前窗口可关闭）

::pause

BAT Code