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

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

zonemu2个月前 (07-28)技术文章23

一、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插件

相关文章

面试官:聊聊你知道的Vue与React的区别

最近面到很多大公司的时候,小编都会碰到一个很尴尬的问题,很多大公司的技术栈都是React,但是小编学的是Vue,其实从本质上来说两者都是比较优秀的前端框架,所以有些面试官会问到Vue和React的区别...

HTML5设计与制作哪家强?全省50多所高职院校齐聚中山比拼

3月22日下午,2018-2019年广东省职业院校学生专业技能大赛“HTML5交互融媒体内容设计与制作”赛项在中山火炬职业技术学院开幕。全省51所高职院校的52支参赛队伍参加此次大赛。参赛师生将于3月...

聊城职院获省赛“HTML5交互融媒体内容设计与制作”赛项一等奖

11月25日,山东省职业院校技能大赛(高职组)“HTML5交互融媒体内容设计与制作”赛项在威海海洋职业学院学院圆满结束。学校信息工程系由计算机应用技术专业学生张慧、冯媛、王海阔三名学生组成的参赛团队,...

HTML5与APP的抉择(h5与app的区别)

同为当下炙手可热的技术,围绕APP和HTML5难免少不了各种争辩。而在“互联网+”时代,许多面临转型的传统企业,也在选择转型工具时,陷入了HTML5或APP的纠结抉择之中……到底该选择HTML5还是A...

小白友好型Windows优化工具BoosterX使用教程 一键提升游戏性能

一款集系统优化和游戏优化为一体的Windows友好型优化工具,BoosterX得到过众多游戏玩家的推荐,它能简单、快速、安全地优化Windows,就算设置出错还能通过备份还原设置。它还提供了一款精简版...

JavaScript中的数组(Array)方法你真的了解吗?

在过去的几个月,我发现我的拉取请求中存在四个完全相同的 JavaScript 错误。于是我写了这篇文章,总结了如何在 JavaScript 中正确使用地使用 Array 的方法!用 Array.inc...