当前位置:首页 > 技术文章 > 正文内容

vscode vue开发环境(vue开发工具 vscode)

一、npm、nodejs安装

1、安装Node.js

官网下载Node.js

双击下载文件,选择安装路径,安装。

#cmd下查看安装完后的版本
node -v
npm -v

2、配置npm的全局模块的存放路径以及缓存的路径

默认会将模块安装到C:\Users\用户名\AppData\Roaming\npm路径中。所以可以修改路径

在node.js的安装目录下新建两个文件夹node-cache和node_global

#创建目录
d:
mkdir software
cd software
mkdir Nodejs
cd Nodejs
mkdir node_global
mkdir node_cache

#设置缓存的路径,之后用npm install XXX -g安装以后模块就在这两个文件夹里。
npm config set prefix "D:\\software\\Nodejs\\node_global"
npm config set cache "D:\\software\\Nodejs\\node_cache"

3、安装cnpm

有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所以还需要npm的国内镜像—cnpm

npm install -g cpm

4、安装vue-cli脚手架

npm install -g  vue-cli
cnpm install -g @vue/cli

5、安装webpack

cnpm install -g webpack

6、用vue-cli构建项目

#初始化项目
vue init webpack my-first-vue
nit:初始化
webpack:构建工具,即整个项目基于webpack构建
MyVue:整个项目文件夹的名称

#运行项目
cd my-first-vue
npm run dev

二、npm源设置

#设置淘宝源
npm config set registry [<https://registry.npm.taobao.org>](<https://registry.npm.taobao.org/>)
#查看源地址
npm config get registry
#测试源
npm info underscore
#在命令行中指定源
npm --registry <https://registry.npm.taobao.org> install [name]
#修改~/.npmrc
registry = <https://registry.npm.taobao.org>

#使用cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install [name]

三、VScode设置

3.1、vscode语言设置

按下ctrl+p, 输入: > Config, 选择: “Configure Display Language"

3.2、安装vuetr插件

3.3、安装eslint插件(eslint:此时打开一个vue文件并编辑, 保存时并不会自动进行格式化, 这里还需要安装一些依赖和一些配置。)

3.3.1、vue安装:npm install -g eslint

3.3.2、vscode安装eslint插件

相关文章

2024前端面试真题之—VUE篇(前端面试题vuex)

添加图片注释,不超过 140 字(可选)1.vue的生命周期有哪些及每个生命周期做了什么? beforeCreate是new Vue()之后触发的第一个钩子,在当前阶段data、methods、com...

Vue基础(vue基础组件文件名符合规范的是)

Vue 是什么,它的核心特点有哪些?Vue 是一款渐进式 JavaScript 框架,它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助开发者用...

迁移GIT仓库并带有历史提交记录(git 迁移仓库)

迁移git仓库开发在很多时候,会遇到一个问题。GIT仓库的管理,特别是仓库的迁移。我需要保留已有的历史记录,而不是重新开发,重头再来。我们可以这样做:使用--mirror模式会把本地的分支都克隆。//...

K8s 的 Namespace 到底解决了什么问题?

在 Kubernetes 的世界里,资源调度、服务编排以及自动化运维构成了它强大的基础架构能力。但随着集群规模的扩大和团队协作复杂度的提升,仅靠原始的资源管理手段已经难以支撑多租户或大型项目的管理需求...

2个将HTML5打包成app的方法(h5打包成android)

越来越多的开发者热衷于使用html5+JavaScript开发移动Web App。不过,HTML5 Web APP的出现能否在未来取代移动应用,就目前来说,还是个未知数。那么,有什么办法,既可以使用H...

前端学习又一大里程碑:html5+js写出歌词同步手机播放器

需要完整代码和视频请评论后加前端群470593776领取javascript进阶课题:HTML5迷你音乐播放器学习疲惫了,代码敲累了,听听自己做的的音乐播放器,放松与满足知识点:for循环语句,DOM...