欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  网络运营

VSCode编辑器和开发环境搭建

程序员文章站 2022-03-13 18:14:36
前端主流编辑器VSCode安装前端编辑器vscode:免费开源的现代化轻量级代码编辑器,支持大部分主流的开发语言的语法高亮、智能代码补全、自定义热键、代码对比 Diff、GIT 等特性,支持插件扩展,软件跨平台支持 Win、Mac 以及 Linux。其他编辑器:sublime、hbuilder、webstormvscode安装地址: https://code.visualstudio.com/Download.设置编译器为中文语言环境,这里需要使用快捷键来实现windows系统:【Ctrl+Sh...

前端主流编辑器VSCode安装

前端编辑器

vscode:免费开源的现代化轻量级代码编辑器,支持大部分主流的开发语言的语法高亮、智能代码补全、自定义热键、代码对比 Diff、GIT 等特性,支持插件扩展,软件跨平台支持 Win、Mac 以及 Linux。
其他编辑器:sublime、hbuilder、webstorm

vscode安装地址: https://code.visualstudio.com/Download.

设置编译器为中文语言环境,这里需要使用快捷键来实现
windows系统:【Ctrl+Shift+P】
mac系统:【Command+Shift+P】

在弹出的搜索框中输入【configure language】,然后选择搜索出来的【Configure Display Language】,之后下载中文插件,下载完成之后重启软件即可。
VSCode编辑器和开发环境搭建

前端开发环境搭建之Node和Npm

什么是NodeJS?
答:Node.js 就是运行在服务端的 JavaScript

什么是npm?
答:nodejs的包管理工具,可以下载使用公共仓库的包,类似maven 包安装分为本地安装(local)、全局安装(global)两种

npm install express # 本地安装express
npm install express -g # 全局安装express
npm list -g #查看所有全局安装的模块

Node安装包下载地址: http://nodejs.cn/download/.

新版的nodejs已经集成了npm,所以npm也一并安装好

苹果系统Mac安装node和npm:
brew install nodejs
brew install npm

Window安装node和npm 下载后一步步安装就行 参考文档:

验证是否成功,如果显示版本号即安装成功
node -v
npm -v
VSCode编辑器和开发环境搭建

切换npm镜像源为淘宝npm镜像

类似maven,从国外下载包很慢,所以就有人改成国内的maven仓库就会快很多,或者搭建自己本地的私服。

国内直接使用 npm 的官方镜像是非常慢的,推荐使用淘宝 NPM 镜像。

淘宝 NPM 镜像是一个完整 npmjs.org 镜像,可以用此代替官方版本。

使用淘宝定制的 cnpm 命令行工具代替默认的 npm:(需要管理员权限)
npm install -g cnpm --registry=https://registry.npm.taobao.org

这样就可以使用 cnpm 命令来安装模块了:
cnpm install [name]

安装好截图如下:
VSCode编辑器和开发环境搭建

Vue + 脚手架Vue-Cli 4.3 安装

什么是Vue: 一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
文档: https://cn.vuejs.org/.

安装新版Vue (直接使用 cli)
npm install vue (可以不用)

什么是Vue-Cli?
Vue 提供了一个官方的 Cli,为单页面应用 (SPA) 快速搭建繁杂的脚手架

安装 新版vue-cli

cnpm install -g @vue/cli

cnpm install -g @vue/cli-init

使用vue-cli创建项目(测试项目,验证vue环境)

vue create project

第一步:进入指定目录创建项目,输入指令vue create project
VSCode编辑器和开发环境搭建
第二步:选择默认编辑器,直接回车就行
VSCode编辑器和开发环境搭建
第三步:创建完成,使用cd project进入创建的文件夹project,之后使用npm run serve进行启动项目。
VSCode编辑器和开发环境搭建
第四步:将http://localhost:8080/输入到浏览器即可访问。
VSCode编辑器和开发环境搭建
第五步:结果如图显示
VSCode编辑器和开发环境搭建
至此,Vue与Vue-cli安装完成。

使用VSCODE导入前端项目

vcscode 初次打开vue项目,推荐安装以下插件:

vetur 插件: vue文件基本语法的高亮插件
eslint插件:智能错误检测插件,在具体开发中作用很大,能够及时的帮我们发现错误
VsCode代码快捷键:Vue 2 Snippets插件 、 Vue Peek插件

每添加一个插件需在setting.json添加配置

配置地方:
点击vetur找到扩展设置
VSCode编辑器和开发环境搭建
在用户目录找到setting.json添加配置
VSCode编辑器和开发环境搭建
添加代码即可
VSCode编辑器和开发环境搭建
最终配置
{
“emmet.syntaxProfiles”: {
“vue-html”: “html”,
“vue”: “html”
},
“eslint.validate”: [
“javascript”,
“javascriptreact”,
“html”,
“vue”
],
“eslint.options”: {
“plugins”:[“html”]
}
}

至此,环境搭建完毕。

本文地址:https://blog.csdn.net/weixin_43918082/article/details/107295680