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的网址就可以访问了