当前位置： 移动技术网 > 网络运营>服务器>Linux > VSCode编辑器和开发环境搭建

VSCode编辑器和开发环境搭建

2020年07月14日  | 移动技术网网络运营  | 我要评论

前端主流编辑器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】，之后下载中文插件，下载完成之后重启软件即可。
在这里插入图片描述

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

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

什么是npm？
答：nodejs的包管理工具，可以下载使用公共仓库的包，类似maven 包安装分为本地安装（local）、全局安装（global）两种

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

Node安装包下载地址: .

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

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

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

验证是否成功，如果显示版本号即安装成功
node -v
npm -v
在这里插入图片描述

切换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]

安装好截图如下：
在这里插入图片描述

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
在这里插入图片描述
第二步：选择默认编辑器，直接回车就行
在这里插入图片描述
第三步：创建完成，使用cd project进入创建的文件夹project，之后使用npm run serve进行启动项目。
在这里插入图片描述
第四步：将http://www.lhsxpumps.com/_localhost:8080/输入到浏览器即可访问。
在这里插入图片描述
第五步：结果如图显示

至此，Vue与Vue-cli安装完成。

使用VSCODE导入前端项目

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

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

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

配置地方：
点击vetur找到扩展设置
在这里插入图片描述
在用户目录找到setting.json添加配置
在这里插入图片描述
添加代码即可
在这里插入图片描述
最终配置
{
“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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网