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

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论