VUE3环境搭建

最近准备用Vue编写一点前端页面，我在前端一直是个小白，之前用的Vue2写了几个页面，现在已经是VUE3了，重新安装下环境开始。

1.npm安装

Vue需要用npm安装，npm是nodejs的package manager，这里我们安装下nodejs，到nodejs的官网下载一个LTS版本 下载后安装即可，只需要选择安装位置和是否自动安装需要的组件，这个根据个人需要选择。 安装完成后，cmd命令行中输入npm -v校验是否安装完成

npm -v node -v

Vue要求安装 18.3 或更高版本的 Node.js，如图示已安装完成。

2.Vue安装

可参考Vue的官网： cn.vuejs.org/guide/quick-start.html 这里我在本地建了一个文件夹，并在此路径下使用命令行创建工程：

npm create vue@latest

创建工程时会让你定义下工程名，并且有几个选择项，这里根据自己的需要选择，不知道是否需要选择可以都选否，后续有需要还可以自己往工程里加配置解决。 我这里选择了用typescript语法开发，主要是因为我本身不熟悉，而且之前写的前端代码比较随意，想规范一下自己，就选上了。 这里可以看到工程目录中已经生成文件了

3.Visual Studio Code

这里我们还需要一个IDE用来编写调试代码，一般使用vs code即可。 到VS code官网链接下载一个windows版本，直接安装即可。 安装完成后打开，到插件扩展市场去搜索安装下Vue - Official， 其他扩展后面用到再下。

4.工程预览

这里我们打开下刚刚创建的工程，直接打开文件夹即可 这里就是我们工程的目录 这里简单看下工程目录结构，点开两个发现还有报错，是因为依赖没有安装。 直接在工程目录下输入npm install安装依赖即可。如果报错请参考附章节。 然后我们看下工程结构：

.vscode 主要是vs编辑器的一些配置node_modules 安装的依赖的文件夹，上面我们npm install的那些依赖就在这个文件夹下public 用于存放静态资源，这里我们新建的工程中只有一个favicon.ico，为标签栏左上角的iconsrc 为主要目录，其中又包含下面几个文件夹 （1）asserts 存放图像、字体等静态资源 （2）component 存放vue的组件 （3）router vue的router文件，用于页面导航 （4）views 用于存放应用程序的页面级组件 （5）app.vue 应用程序的根组件 （6）main.ts 初始化并且配置vue程序index.html 应用程序的入口文件package.json 配置了项目的依赖tsconfig.json ts的一些配置vite.config.js vite项目配置 5.项目启动

在命令行中输入

npm run dev

即可在本地启动新建的工程 如图所示，我们打开http://localhost:5173/ 可以看到工程可正常启动成功。

附：

安装npm后首次npm install报错： 具体报错为

npm : 无法加载文件 E:\env\node\nodejs\npm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft /fwlink/?LinkID=135170 中的 about_Execution_Policies。 所在位置 行:1 字符: 1 + npm install + CategoryInfo : SecurityError: (:) []，PSSecurityException /fwlink/?LinkID=135170 中的 about_Execution_Policies。 + npm install + ~~~ + CategoryInfo : SecurityError: (:) []，PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess

这是PS执行策略的问题，我们查询下执行策略：

get-ExecutionPolicy

可以看到是被禁止了， 需要我们改一下执行策略

Set-ExecutionPolicy -Scope CurrentUser remotesigned # 直接连在一起输入也可以

然后我们再获取下策略，这里策略就允许了，可以正常npm install了