成都科技网站建设咨询电话湛江建站服务
最近准备用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安装依赖即可。如果报错请参考附章节。
然后我们看下工程结构：
- .vscode 主要是vs编辑器的一些配置
- node_modules 安装的依赖的文件夹，上面我们npm install的那些依赖就在这个文件夹下
- public 用于存放静态资源，这里我们新建的工程中只有一个favicon.ico，为标签栏左上角的icon
- src 为主要目录，其中又包含下面几个文件夹
（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
.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了
