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的官网：https://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安装依赖即可。如果报错请参考附章节。

然后我们看下工程结构：

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

5.项目启动

在命令行中输入

npm run dev

即可在本地启动新建的工程

如图所示，我们打开http://localhost:5173/

可以看到工程可正常启动成功。

附：

安装npm后首次npm install报错：

具体报错为

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

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

get-ExecutionPolicy

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

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

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