您的位置:首页 > Web前端 > Vue.js

使用 Vscode 如何快速搭建和启动 第一个 vue 项目 ?

2020-06-07 15:49 351 查看

使用 Vscode 如何快速搭建和启动 第一个 vue 项目 ?

总结来说,其实启动Vue项目的方法有很多 ,本文主要介绍使用Vscode 搭建基础环境,来创建启动vue项目

1: 安装 Vscode、nodejs 。

1)下载与安装:

百度网盘连接:
Vscode 免安装,解压即可使用:VSCode-win32-x64-1.45.1

链接:https://pan.baidu.com/s/1vN4WvTk7um2rWG_crDEIfg
提取码:2azf

node-v12.18.0-x64 ------ npm包管理器,是集成在node中的,所以安装了node也就有了npm

链接:https://pan.baidu.com/s/10BxuT1cATd0g1dK31__Kfw
提取码:xbeh

或者 nodejs 中文官方网站 可下载最新版本的

https://nodejs.org/zh-cn/download/

2)安装 nodejs 以及相关的配置

参考 原文链接:https://www.cnblogs.com/liuqiyun/p/8133904.html

2: 全局安装vue-cli,vue-cli可以帮助我们快速构建Vue项目

npm install -g vue-cli      -g表示全局

3: 安装webpack,它是打包js的工具

npm install -g webpack

4. 安装完成之后就可以开始创建vue项目

首先创建一个文件夹用来存放你的项目,用vscode 打开对应的文件夹,并在终端cd到对应的文件夹。比如我的文件夹就是myvue

创建项目
vue init webpack  "项目名"   在你的文件夹中,会自动创建以 你项目名 命名的文件夹

坑一 :如遇到以下情况:
vue init webpack myfirstvue


这是因为记事本,默认不支持打开不信任的脚本,只需执行以下即可:

  • 1 以管理员身份运行PowerShell
  • 2 执行:get-ExecutionPolicy,如果显示Restricted,表示状态是禁止的
    3 执行:set-ExecutionPolicy RemoteSigned
    4 选择Y
坑二 vue-cli 创建项目特别慢解决方法

理论上,来说 vue init webpack projectName 新建项目是和淘宝镜像没关系的,因为vue-cli 用的是 npm 源,所以只要设置 npm 源就行了,可以提升创建速度:
在任意目录下执行即可:

npm config set registry https://registry.npm.taobao.org

再次创建,接着会出现一些配置项,可以根据需要配置,也可以默认,直接按回车。

完成之后,一个基本的 vue项目就搭建完了。

之后使用 vscode 打开创建好的项目,其中main.js就是入口。


启动项目:

本地启动成功:

附加语:

使用 Vscode 快速搭建和启动vue 的感触 :
1:作者在使用IDEA终端,Win 终端 创建vue 同样也是可以创建启动vue项目,其搭建环境的过程都是雷同。
2:Vscode工具  ctrl + ~  快速打开终端
3:新版的Node.js已自带npm,安装Node.js时会一起安装,npm的作用就是对Node.js依赖的包进行管理,
也可以理解为用来安装/卸载Node.js需要装的东西
4: 使用国外npm 可能会很慢太多,可以使用设置国内淘宝镜像,在终端执行以下命令,
等待下载插件cnpm 即可
npm install-g cnpm --registry=https://registry.npm.taobao.org

最后

刚刚学习写博文,心中无比恐慌,请大家多多指点,感谢大家的阅读:Feign.Er

喜欢博主的小伙伴可以加个关注、点个赞哦,以后会慢慢更新相关博文 嘿嘿!

主要参考博文: 原文链接:https://www.cnblogs.com/liuqiyun/p/8133904.html
http://blog.sina.com.cn/s/blog_13f8261eb010307fo.html
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: