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

vscode vue开发环境(vscode vue3.0)

ruisui883个月前 (02-03)技术分析11

一、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 []()
#查看源地址
npm config get registry
#测试源
npm info underscore
#在命令行中指定源
npm --registry  install [name]
#修改~/.npmrc
registry = 

#使用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插件

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/911.html

分享给朋友:

“vscode vue开发环境(vscode vue3.0)” 的相关文章

如何在 Linux 发行版中安装微信和 QQ?

很多人因为工作沟通的原因需要用到微信和 QQ,那么如何在 Linux 发行版中安装微信和 QQ 呢?以下是一些尝试的解决方法。QQ上一个版本的 QQ Linux 版还是在2009年,而在现在,基于 NT 架构的全新 QQ Linux版已经被正式推出,为所有用户提供下载。新版本提供了deb、rpm、A...

前后端分离自动化运维平台开发

运维平台采用前后端分离:前端vue,框架vue-element-admin;后端python,框架django-rest-framework.目前运维平台模块如下:1、 CMDB管理应用管理、环境管理、开发语言管理、产品项目管理、资产管理2、 构建发布持续构建、持续部署、Jar工程依赖构建3、 容器...

摄影后期必看 | PS插件camera raw 16.4教程 | 范围蒙版

范围蒙版Camera Raw 【蒙版】模块中提供了三个范围蒙版工具,可以通过特定的范围来创建蒙版。此次新增的【范围蒙版】大大加强了acr插件对局部调整的能力。点击下拉小箭头可以看到【颜色范围】,可用于快速选择想要编辑的颜色。快捷键:Shift + C【明亮度范围】,可用于快速选择想要调整的明亮度。快...

虚幻引擎5.5现已发布 手游开发、动画制作重大改进

Epic在今天发布了虚幻引擎5.5,现可通过Epic Launcher下载。此版本在动画创作、渲染、虚拟制片、移动端游戏开发和开发人员迭代工具集等方面做出了重大改进。 官方博客:虚幻引擎5.5现已发布,在动画创作、虚拟制作和移动游戏开发方面取得了显著进步,渲染、摄像机内视觉特效和开发人员迭代等领域的...

最快清除数组空值?分享 1 段优质 JS 代码片段!

本内容首发于工粽号:程序员大澈,每日分享一段优质代码片段,欢迎关注和投稿!大家好,我是大澈!本文约 600+ 字,整篇阅读约需 1 分钟。今天分享一段优质 JS 代码片段,用最简洁的代码清除了数组中的空值。老规矩,先阅读代码片段并思考,再看代码解析再思考,最后评论区留下你的见解!const arr...

TDesign企业级开源设计系统越发成熟稳定,支持 Vue3 / 小程序

TDesing 发展越来越好了,出了好几套组件库,很成熟稳定了,新项目完全可以考虑使用。早在2021年,腾讯的 TDesing 刚发布不久,我就写了一篇简短的文章来介绍,当时主要关注的是 TDesign 的 Vue 组件库和用来搭建 admin 后台系统的实用性。虽然当时看起来不错,但还处于测试版,...