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

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

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

一、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)” 的相关文章

医疗养老收费管理系统

医疗养老收费管理系统headerfooter《医疗养老收费管理系统》是最新开发的适用于养老保险收费行业的管理系统。主要功能:1.基本信息:单位设置、缴费基数、缴费比例和队别设置;2.医疗保险管理:医疗保险人员信息、医疗保险收费、医疗保险信息查询、医疗保险收费查询、医疗保险收费情况;3.养老保险信息:...

亚马逊推出 Amazon Linux 2023 发行版,专为 AWS 云进行优化

稿源:IT之家3 月 19 日消息,本周早些时候,亚马逊宣布推出其第三代 Linux 发行版 Amazon Linux 2023(AL2023)。亚马逊表示,该版本将带来高安全性标准、可预测的生命周期和确定性更新。Amazon Linux 2023 针对 Amazon EC2 进行了优化,与最新的...

红帽最新的企业 Linux 发行版具有解决混合云复杂性的新功能

据zdnet网5月1日报道,红帽这家 Linux 和超云领导者今天发布了其最新的旗舰 Linux 发行版 Red Hat Enterprise Linux (RHEL) 9.4,此前上周宣布对已有十年历史的流行 RHEL 7.9 再支持四年。这个领先的企业 Linux 发行版的最新版本引入了许多新功...

vue3中父子组件之间传值的详解

首先我们回顾一下vue2中父子组件是怎么传值的,然后对比vue3进行详解。一、vue2中父子组件传值<!-- 父组件 --> <template> <div> // name:父组件把值传给子组件test-child // childFn:...

2024前端面试真题之—VUE篇

添加图片注释,不超过 140 字(可选)1.vue的生命周期有哪些及每个生命周期做了什么? beforeCreate是new Vue()之后触发的第一个钩子,在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问。 created在实例创建完成后发生,当前阶段已...

美国民众负债累累 但今年假期消费者支出仍将创下新高

智通财经APP获悉,在迎接假期之际,许多美国人已经背负了创纪录的信用卡债务。然而,今年假期消费者支出仍将创下新高。根据美国零售联合会(NRF)上周发布的报告,预计今年11月1日至12月31日期间的消费总额将达到创纪录的9795亿至9890亿美元之间。NRF首席经济学家Jack Kleinhenz表示...