vue学习的第一步,vscode介绍及相关插件安装

1:vsvode简介

vue学习的第一步,vscode介绍及相关插件安装_第1张图片

Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux。

 

还有其几款ide,webstorm,Sublime,text3等,看个人喜好而定。

2:vue简介

Vue.js 是目前最火的一个前端框架,它和Angular.js、React.js 一起,并成为前端三大主流框架。Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。(Vue有配套的第三方类库,可以整合起来做大型项目的开发),前端的主要工作,主要负责MVC中的V这一层,主要工作就是和界面打交道,来制作前端页面效果。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。

3:vscode下载及相关插件安装

3.1:vscode下载地址:https://code.visualstudio.com/Download

3.2:vetur插件安装:支持vue代码高亮显示。

vue学习的第一步,vscode介绍及相关插件安装_第2张图片

3.3:ESLint插件安装:是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具。ESLint 能够帮你轻松写出高质量的 JavaScript 代码

 vue学习的第一步,vscode介绍及相关插件安装_第3张图片

3.4:安装nodejs,运行前端代码并在浏览器中访问必须安装,可以把它理解为一个轻量级的JSP或PHP环境,但是用来开发Web应用的话,有时要便捷很多。

 

下载地址:https://nodejs.org/en/download/

安装完成后,打开cmd命令窗口,执行node -v验证

vue学习的第一步,vscode介绍及相关插件安装_第4张图片

 

4:项目测试

vueAdmin-template是 一个简单的 vue admin 管理后台 它只包含了 Element UI & axios & iconfont & permission control & lint,这里以它来演示

下载地址:https://github.com/PanJiaChen/vueAdmin-template#vueadmin-template

4.1:下载解压到随便一个磁盘位置

4.2:打开vscode,file->open Folder,加载目录

4.3:打开终端:Terminal->New Terminal进入终端,这里默认为当前项目目录

4.4:执行命令:npm install

如果报错,请确认vscode是以管理员权限运行,cmd窗口运行node -v,npm -v是否正常。

4.5:执行命令:npm run dev

4.6:在浏览器上就可以访问了http://localhost:9528/

5:将项目编译成静态页面

执行命令:npm run build:prod

vscode的版本不同,命令会有区别,查看这个文件package.json,找到图中红圈的地方,有的地方叫build,有的叫buildprod

vue学习的第一步,vscode介绍及相关插件安装_第5张图片

 

6:发布打包的文件

上一步打包成功后,会在目录中生成一个dist的文件夹,将文件夹放到nginx的html文件夹中,就可以访问了。

你可能感兴趣的:(前端,vue.js,vue)