VSCode编辑器和开发环境搭建
前端主流编辑器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安装包下载地址: http://nodejs.cn/download/.
新版的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://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