VSCode安装+若依前端访问

VSCode安装+若依前端访问

安装vscode

https://code.visualstudio.com/

安装开发vue所需插件

Vetur —— 语法高亮、智能感知、EmmetEsLint —— 语法纠错

Auto Close Tag —— 自动闭合HTML/XML标签 

Auto Rename Tag —— 自动完成另一侧标签的同步修改 

JavaScript(ES6) code snippets —— ES6语法智能提示以及快速输入

Path Intellisense —— 自动路径补全

HTML CSS Support —— 让 html 标签上写class 智能提示当前项目所支持的 

样式 

Beautify——格式化代码,值得注意的是,beautify插件支持自定义格式化代码 

规则

Bracket Pair Colorizer——给括号加上不同的颜色,便于区分不同的区块,使 

用者可以定义不同括号类型和不同颜色 

open in browser——直接右键项目单击启动 

chinese ——中文汉化 

VSCode安装+若依前端访问_第1张图片

安装开发nodejs所需环境

下载node并安装:https://nodejs.org/dist/v12.14.0/node-v12.14.0-x64.msi;

验证环境变量
VSCode安装+若依前端访问_第2张图片

npm:node.js的包管理工具,用于统一管理我们前端项目中需要用到的包、插件、工具、命令等,便于开发和维护。
ES6Javascript的新版本,ECMAScript6的简称。利用ES6我们可以简化我们的JS代码,同时利用其提供的强大功能来快速实现JS逻辑。
vue-cli:Vue的脚手架工具,用于自动生成Vue项目的目录及文件。
vue-router: Vue提供的前端路由工具,利用其我们实现页面的路由控制,局部刷新及按需加载,构建单页应用,实现前后端分离。
vuex:Vue提供的状态管理工具,用于统一管理我们项目中各种数据的交互和重用,存储我们需要用到数据对象。
element-ui:基于MVVM框架Vue开源出来的一套前端ui组件。

对npm设置镜像

1、打开cmd
npm config set registry https://registry.npm.taobao.org
2、配置后可通过下面命令来验证是否成功
npm config ls
输出:metrics‐registry = "http://registry.npm.taobao.org/"表示 设置成功
3、注册
npm config get registry

导入项目

VSCode安装+若依前端访问_第3张图片

打开终端,依赖下载

npm install
也可使用
npm install --registry=https://registry.npm.taobao.org

VSCode安装+若依前端访问_第4张图片

运行

 npm run dev 

VSCode安装+若依前端访问_第5张图片

若依前端结构

VSCode安装+若依前端访问_第6张图片

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