wordpress 自定义评论网站排名优化
本文是综合了所有vue安装教程而成 更细化 更简略 希望对各位读者有所帮助！
Vue安装
1. Vue-cli脚手架安装
安装vue的方式有很多 我们这里选择npm方式安装vue
- npm方式
npm方式安装vue，详细介绍见下文。
1.node.js安装和配置
安装npm 需要安装note.js（NPM是包含在Node.js里的包管理工具），它具有以下功能：允许用户从NPM服务器下载别人编写的第三方包到本地使用。允许用户把自己编写的包或插件上传到NPM服务器供别人下载使用。来自各地的开源软件开发者可以使用 npm 互相分享和借鉴。包的结构使软件开发者能够轻松跟踪项目依赖项和版本。
下载安装node.js
官网下载最新版本：
https://nodejs.org/en/download/current/
我更新此文时，当前时间2024年12月3日，note最新版本: Node.js (v23.3.0 npm 10.9.0)
以版本V23.3.0 windows版本下载为例
https://nodejs.org/zh-cn/download/prebuilt-installer
选择预建安装程序--》windows---->x64---->v23.3.0(Current)版本，点击下载Node.js v23.3.0
然后一直点击下一步即可
2.node.js环境配置
（1）、检查node 和npm版本信息
同时按window+R键,输入cmd,打开命令提示符窗口
(4.1.1)、检查node 版本
输入： node –v （查看刚才所安装的node版本）
(4.1.2)、 检查npm 版本
输入： npm –v （查看刚才所安装的npm版本）
3.切换npm的淘宝镜像
以管理员身份在命令行中执行指令：npm config set registry 最新淘宝镜像地址
最新地址获取方式：直接在CSDN搜索栏搜索淘宝镜像最新地址，复制粘贴到指令即可。
所以我这里执行指令：npm config set registry https://registry.npmmirror.com/
4.安装Vue-cli
使用管理员身份运行命令行，在命令行中，执行如下指令：npm install -g @vue/cli
这个过程中，会联网下载，可能会耗时几分钟，耐心等待。
安装完成后可以执行指令 vue --version来测试是否成功。
至此，环境准备工作已经搭建完。
Vue项目创建、介绍、运行
1.Vue项目创建
(图形化界面创建步骤）
Vue-cli提供了如下2种方式创建vue项目:
命令行：直接通过命令行方式创建vue项目vue create vue-project01
图形化界面：通过命令先进入到图形化界面，然后再进行vue工程的创建vue ui
（这里作者用图形化界面的方式来创建）
新建文件夹vue，打开文件夹，复制该目录地址
以管理员身份打开终端，进入该目录下的命令行cd 复制的地址，执行指令vue ui
这里一定一定要用管理员身份打开，不然会报错！！！
执行指令后，自动打开Vue项目管理器，直接创建新项目
预设我们这里选择手动
功能这里我们在默认的配置下只需要再把Router打开就可以，其他的不用修改
配置中Vue版本选择3.0，语法检测规范选择第一个即可
然后直接点击创建（再提醒一次，一定要用管理员身份打开命令行，然后转跳ui界面，不然这里会创建失败！！）
创建成功
创建成功后这个ui界面可以直接关闭了，然后我们在vscode里面打开这个vue项目文件夹
至此，创建完成
2.vue项目-目录结构
vue项目的标准目录结构以及目录对应的解释如下图所示:
3.Vue项目-运行
- 第一种方式：命令行方式
直接基于cmd命令窗口，在vue目录下，执行输入命令 npm run serve 即可，如下图所示：
- 第二种方式：通过VS Code提供的图形化界面，如下图所示
（注意：NPM脚本窗口默认不显示，可这里放一个我自己亲自试验有效的方法）
- 通过设置/用户设置/扩展/NPM更改/NPM默认配置
然后重启VS Code，并且双击打开package.json文件，然后点击资源管理器处的3个小点，勾选npm脚本选项
运行vue项目：
在终端界面中，我们发现项目是运行在本地服务的8080端口，直接通过浏览器打开地址：
出现此页面表示成功运行
其实此时访问的是 src/App.vue这个根组件，此时我们打开这个组件，修改代码
- 把Home 改成Vue Home，然后保存
- 会发现浏览器的页面在没有重新启动和刷新的情况下自动变成了Vue Home
4.Vue项目-配置端口
- 对于8080端口，经常被占用，所以需要修改默认的8080端口。
- 修改vue.config.js文件的内容，添加如下代码：
如下图所示，然后我们关闭服务器，并且重新启动，端口更改成功，可以通过浏览器访问7000端口来访问我们之前的项目
5. Vue项目开发流程
- 我们访问的首页是index.html，但是打开public/index.html文件发现，index.html的代码很简洁，但是浏览器所呈现的内容却很丰富，代码和内容不匹配
- 这是因为vue项目的开发流程
-
5.1 入口函数main.js
- 对于vue项目，index.html文件默认是引入了入口函数main.js文件，我们找到src/main.js文件，其代码如下：
import: 导入指定文件，并且重新起名
例如上述代码 import App from ‘./App.vue’ 导入当前目录下得App.vue并且起名为App
new Vue(): 创建vue对象
$mount(‘#app’)：将vue对象创建的dom对象挂在到id=app的这个标签区域中，作用和之前学习的vue对象的le属性一致。
router: 路由，详细在后面的小节讲解
render: 主要使用视图的渲染的
main.js中通过代码挂在到index.html的id=app的标签区域的。
5.2 App.vue
首页内容如何呈现的问题，涉及到render中的App了，如下图所示：
打开App.vue，注意的是.vue结尾的都是vue组件。而vue的组件文件包含3个部分：
template: 模板部分，主要是HTML代码，用来展示页面主体结构
script: js:代码区域，主要是通过js代码来控制模板的数据来源和行为
style: css样式部分，主要通过css样式控制模板的页面效果
此时我们可以打开App.vue，观察App.vue的代码，其中可以发现，App.vue组件的template部分内容，和我们浏览器访问的首页内容是一致的，如下图所示：
总结
本篇文章是2023年最新黑马JavaWeb企业级开发笔记08：Vue-cli脚手架安装、NodeJS环境搭建、Vue项目的创建、运行、端口修改、Vue开发流程的总结，帮助需要学习Web开发的朋友温故而知新。
本篇文章重点是安装步骤，细化了每一个步骤，对于可能遇到的问题均补充了解决办法。