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

发布时间 2023-07-27 01:24:50作者: 心未鳴

一、创建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对允许算法和密钥大小增加了严格的限制。

五、进一步了解VUE,给进行编程做准备

        VUE介绍

        VUE API