VSCode导入Vue项目入门部署与启动
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue

·
一、VSCode导入vue项目
首先保证自己电脑上拥有VSCode,并安装所需的一些插件
- 下载所需插件
其中倒数第二个可能搜不到,用以下扩展进行代替
-
与idea导入项目一致,选择前端项目的文件夹进行导入
-
进行启动项目,前提是电脑上需要有node
使用“Ctrl+~”调出终端 在VS的终端启动命令
npm install 安装vue插件初始化项目
npm run dev 启动项目,就可以在浏览器中打开页面
或者
cnpm install
cnpm run dev
前者的命令下载node后即可,版本不宜过高
后者需要将npm下载镜像,使用淘宝镜像- 命令就改为了cnpm,会加快项目的启动速度
-
结果显示
如图就是项目启动成功了 -
停止前端项目运行
在终端 ctrl+c 来停止运行 -
PS:没有node.js的需要下载,官网提供的版本过高,下载安装后容易出现一些问题导致不能运行,建议下载与项目适配的版本,node.js历史版本可参考以下博客
node.js历史版本下载安装
二、下载node及安装淘宝镜像
找到需要下载的版本,下载并一路点击安装即可
-
在cmd中检查是否安装成功,出现版本号就表示安装成功
-
配置npm的全局模块的存放路径 以及 cache缓存的路径
这两个路径保证是跟node.js的modules目录在一个文件夹下
即 在本机中我的路径是C:\Program Files\nodejs
设置全局模块的安装路径到 “node_global” 文件夹,
设置缓存到 “node_cache” 文件夹因此命令为:
npm config set prefix "C:\Program Files\nodejs\node_global" npm config set cache "C:\Program Files\nodejs\node_cache"
-
配置淘宝镜像
@后的数字可以更改为想要的版本 若不加上@6 就默认下载最新版本的镜像cnpm
国内镜像 npm install -g cnpm@6 --registry=https://registry.npm.taobao.org
- 检查是否安装成功,如下即安装成功
- 若显示cnpm不是内部或外部命令,可能是以下的原因
- npm的全局模块的存放路径 以及 cache的路径跟node.js不在一个目录下
- 淘宝镜像过期
解决:npm淘宝镜像过期解决办法
- 检查是否安装成功,如下即安装成功




vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:17 天前 )
9e887079
[skip ci] 11 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
更多推荐
所有评论(0)