快速上手VUE:创建、运行、发布,HelloWorld

一、创建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

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