vue从零到创建前端项目教程
作者：三熙
vue创建前端项目
安装VScode
直接在官网进行下载https://code.visualstudio.com/
- 首页
- vscode设置成中文
默认为英文，可以通过下面的操作改为中文
1.按快捷键"Ctrl + Shift + P"(也可以使用点击图片的位置)
2.输入"configure Display language",然后回车
3.选择中文就可以了，可能会需要重启，重启这个软件就好了
如何不想设置，也可以通过在拓展商店中安装中文插件就可以
到这一步也就安装好常用的工具，但是还不能创建项目之类的，也就是只有一个工具了。在这我讲解一下如何安装前端需要的。
打开终端
在终端中点击 新建终端 ，就可以打开一个终端窗口，可以在里面使用命令符
切换至cmd命令终端
在这切换就可以了
卸载node
如果电脑中已经安装了node,建议卸载之前安装的，否则可能会产生问题，比如无法切换node版本，提示exit staus 145 错误等。
安装nvm
项目依赖的node版本是不一样的，但是原始切换版本很麻烦，需要手动去修改环境变量 所以有个node版本的切换器,会很方便, nvm就是这样一个工具
安装地址
Releases · coreybutler/nvm-windows (github.com)
- 注意这里有noinstall和setup版，区别是前者是免安装，需手动配置，新手推荐使用后者，免配置
选择NVM的安装路径。可以按照个人习惯，自行选择安装路径。
选择NodeJS的Symlink (符号链接)文件夹的位置，用于生成NodeJS的映射目录。
安装之后可以在cmd中使用 “nvm -v”，如果提示版本号则证明安装成功了
修改nvm的安装配置
因为nvm默认安装node使用的是国外的镜像，为了避免安装失败，所以要修改一下nvm配置，首先打开你的nvm所在文件夹，用编辑器打开settings.txt
然后在文件里面添加两条内容，分别是node和npm的下载源，如下：
node_mirror https://npm.taobao.org/mirrors/node/ npm_mirror https://npm.taobao.org/mirrors/npm/
安装node
- 在终端或命令cmd输入
nvm install [version],然后回车即可,这里的version指的是你想要安装的node版本，下同。 - 安装完成后使用
nvm ls available查看已安装的node版本
- CURRENT：为当前最新的版本
- LTS：为稳定版本
- OLD：历史版本
建议选择LTS稳定版的
- 使用
nvm use [version]来使用你选择的node版本 - 也可使用
nvm uninstall [version]卸载node版本
例如nvm install 20.10.0则是安装v20.10.0版本的node，而nvm uninstall 20.10.0为卸载v20.10.0版本的node
安装完成后在命令行工具输入node -v和npm -v检查是否安装成功，若命令行输出版本号则说明安装成功。
配置npm
首先打开你安装nvm时创建的nodejs文件夹（需要使用nvm安装某个node版本后才会出现nodejs文件夹），然后在里面创建node_global和node_cache两个文件夹。
在这我创建nvm时多了一层，所以我放在同层了。
然后在命令行工具执行下面两条命令来修改npm全局安装包和缓存的位置：
修改npm的包的全局安装路径,
npm config set prefix "D:\Program Files\nvm\node_global"
修改npm的包的全局cache位置
npm config set cache "D:\Program Files\nvm\node_cache"
查看当前npm包的全局安装路径
npm prefix -g
查看当前npm包的全局cache路径
npm config get cache
最后配置环境变量
此电脑 -> 属性 -> 高级系统设置 -> 环境变量 -> 系统变量 -> path ->编辑 - > 新增路径 - D:\Program Files\nvm\node_global"（路径可以根据npm prefix -g查看）
更多的nvm命令
nvm list ：列出所有已安装的 node 版本 nvm list available ：显示所有可下载的版本 nvm install stable ：安装最新版 node nvm install [node版本号] ：安装指定版本 node nvm uninstall [node版本号] ：删除已安装的指定版本 nvm use [node版本号] ：切换到指定版本 node nvm current ：当前 node 版本 nvm alias [别名] [node版本号] ：给不同的版本号添加别名 nvm unalias [别名] ：删除已定义的别名 nvm alias default [node版本号] ：设置默认版本
安装vue脚手架
执行命令
安装 npm install -g vue npm install -g @vue/cli
(如果执行失败，提示vue不是内部命令，需要卸载重新安装)
卸载 npm uninstall vue-cli -g
检验是否安装成功
vue -V
下面是执行成功
创建前端项目
我这里是使用vue脚手架通过ui界面创建的项目
在命令行中执行vue ui，这个目录是我专门存储项目的路径
然后跳转到这个网址
在这个里面就可以创建项目了
如果选择手动，则需要自己选择功能，我这里选择的是default vue3,选择后就可以直接创建项目了
创建之后，就可以进行自己的操作了，如果想要添加其他的功能，也可以直接在这个页面进行对应的操作
启动项目
创建好之后，回到vscode，点击上面的文件 -> 打开文件夹，选择对应的文件即可
点击启动，项目就可以启动了，然后在浏览器中打开Local的网址就可以访问了
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。