至今头条

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

2023-07-27 01:11 由 心未鳴 发表于 #前端开发

一、创建VUE项目

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

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

        

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

        

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

        

二、运行

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

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

 E:
 cd /其它/VuejsApp1
DOS Code

        

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

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

        

        

三、发布

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

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

        

        

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

        目前遇到的错误为两种：

                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

六、进一步了解VUE，给进行编程做准备

        VUE介绍

        VUE API

热门相关：流鱼无恙   神算大小姐   上神来了   富贵不能吟   神算大小姐