1.Git安装
安装
- 双击，然后一直下一步安装即可（不要修改安装路径，容易出现乱码）。
- 不要安装到含有中文的路径中。比如，不要安装到 “D:/软件/学习/Git”
- 安装完毕，绝对不可以剪切（移动）到其他文件夹。
- 比如安装到
D:/aa/bb/cc文件夹，千万不要重命名路径中的任何一个文件夹 - 安装完毕，鼠标在任何文件夹空白位置右键，如果出现
Git Bash Here，则表示安装成功。(或者点击“Git Bash Here” --> 输入 git --version 回车，如果看到版本号，则表示安装成功) - Mac用户，使用自带的终端。输入“git --version”，回车，如果看到版本号，则表示安装成功
Mac用户需要额外配置一下：访达 -> 服务 -> 服务偏好设置 -> 勾选“新建位于文件夹位置的终端窗口”
配置参数
Git软件在工作的时候，需要知道你是谁？所以需要设置一个用户名和邮箱。
这个用户名和邮箱，最好使用你的github账号或码云账号（如果你有账号的话），当然随便填也可以。
具体做法：
- 任何文件夹，空白处，右键 --> Git Bash Here
- 依次执行下面两行命令
git config --global user.name "xxx"
git config --global user.email "xxx"
配置之后，可以通过下面的命令来检查是否配置成功了
# 查看所有的全局配置项
git config --list --global
# 查看单个的配置项，比如查看用户名
git config user.name
2.Node.js环境安装
下载安装
如果希望通过 Node.js 来运行 Javascript 代码，则必须在计算机上安装 Node.js 环境才行。
安装包可以从 Node.js 的官网首页直接下载，进入到 Node.js 的官网首页，点 击绿色的按钮，下载所需的版本后，双击直接安装即可。
进入官网（中文），可以看到如下两个版本：
- LTS 为长期稳定版，对于追求稳定性的企业级项目来说，推荐安装 LTS 版本。
- Current 为新特性尝鲜版，对于热衷于尝试新特性的用户来说，推荐安装 Current 版本的 Node.js。但是，Current 版本 中可能存在隐藏的 Bug 或安全性漏洞，因此不推荐在企业级项目中使用 Current 版本的 Node.js。
建议使用 长期支持版
查看已安装的Node.js的版本号
打开终端（黑窗口，或者蓝窗口），在终端输入命令 node –v 后，按下回车键，即可查看已安装的 Node.js 的版本号。
如果你能够看到版本号，说明你已经安装成功了。
3.安装vue/cli
安装@vue/cli全局模块包, 得到Vue命令, 以后创建Vue脚手架项目
安装
- 全局安装@vue/cli模块包
yarn global add @vue/cli
# OR
npm install -g @vue/cli
注意: 如果半天没动静(95%都是网速问题), 可以ctrl c
- 停止重新来
- 换一个网继续重来
- 查看
Vue命令版本
vue -V
总结: 如果出现版本号就安装成功, 否则失败
补充(vscode的配置)
用户代码片段
{
// Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
"Print to console": {
"prefix": "log",
"body": [
"console.log($1);",
],
"description": "Log output to console"
},
"yulan tupian": {
"prefix": "ajax_yulan",
"body": [
"//1.给file表单元素注册onchange事件",
"$('file表单').change(function () {",
"\t//1.2 获取用户选择的图片",
"\tlet file = this.files[0];",
"\t//1.3 将文件转为src路径",
"\tlet url = URL.createObjectURL(file);",
"\t//1.4 将url路径赋值给img标签的src",
"\t$('img元素').attr('src', url);",
"});"
],
"description": "图片预览固定四个步骤"
},
"comment for function": {
"prefix": "///",
"body": [
"/**",
"* @description:",
"* @param {type} ",
"* @return: ",
"*/",
],
"description": "函数标准注释快捷键"
},
"jquery to ajax": {
"prefix": "ajax",
"body": [
"$.ajax({",
"\turl:'',",
"\ttype:'get',",
"\tdataType:'json',",
"\tdata:'',",
"\tsuccess: function(backData){",
"",
"\t}",
"});"
],
"description": "ajax请求"
},
"get for XMLHTTPRequest": {
"prefix": "ajax1",
"body": [
"//(1).实例化ajax对象",
"let xhr = new XMLHttpRequest();",
"//(2).设置请求方法和地址",
"//get请求的数据直接添加在url的后面 格式是 url?key=value",
"xhr.open('get', '接口url');",
"//(3).发送请求",
"xhr.send();",
"//(4).注册回调函数",
"xhr.onload = function() {",
"\tconsole.log(xhr.responseText)",
"};",
],
"description": "get-原生XMLHTTPRequest实现ajax"
},
"post for XMLHTTPRequest": {
"prefix": "ajax2",
"body": [
"//(1).实例化ajax对象",
"let xhr = new XMLHttpRequest();",
"//(2).设置请求方法和地址",
"xhr.open('post', '$1');",
"//(3).设置请求头（post请求才需要设置）",
"xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');",
"//(4).发送请求 ： 参数格式 'key=value' ",
"xhr.send('key=value');",
"//(5).注册回调函数",
"xhr.onload = function () {",
"\tconsole.log(xhr.responseText);",
"};"
],
"description": "post-原生XMLHTTPRequest实现ajax"
},
"file to ajax": {
"prefix": "ajax-file",
"body": [
"$('提交按钮').on('click',function(e){",
"\t//禁用表单默认提交事件",
"\te.preventDefault();",
"\t//创建FormData对象：参数是表单dom对象",
"\tlet fd = new FormData('form表单DOM对象')",
"\t$.ajax({",
"\t\turl:'',",
"\t\ttype:'post',",
"\t\tdataType:'json',",
"\t\tdata:fd,",
"\t\tcontentType: false,",
"\t\tprocessData: false,",
"\t\tsuccess: function(backData){",
"\t\t}",
"\t});",
"});"
],
"description": "表单提交ajax请求"
},
"express-server": {
"prefix": "express",
"body": [
"//1.导入模块",
"const express = require('express');",
"//2.创建服务器",
"let app = express();",
"//3.开启服务器",
"app.listen(3000,()=>{",
"console.log('success');",
"});"
],
"description": "快速搭建express服务器"
},
"http-server": {
"prefix": "http",
"body": [
"//1.导入模块",
"const http = require('http');",
"\n//2.创建服务器",
"let server = http.createServer((req,res)=>{\n});",
"\n//3.开启服务器",
"server.listen(3000,()=>{",
"\tconsole.log('服务器开启成功');",
"});"
],
"description": "快速搭建http服务器"
},
"get element by id": {
"prefix": "query",
"body": [
"let box = document.querySelector('.box')",
],
"description": "根据id获取元素"
},
"enmu arr": {
"prefix": "forin",
"body": [
"for(let i = 0;i<arr.length;i++){",
"\tconsole.log(arr[i]);",
"};",
],
"description": "数组快速for循环遍历"
},
"get elment by tagname": {
"prefix": "gtg",
"body": [
"let liList = document.getElementsByTagName('li')",
],
"description": "根据标签名获取元素"
},
"get elment by classname": {
"prefix": "gcn",
"body": [
"let oneList = document.getElementsByClassName('one')",
],
"description": "根据类名获取元素"
},
"quick event": {
"prefix": "click",
"body": [
"//注册事件",
"box.onclick = function(){}",
],
"description": "快速注册点击事件"
},
"需求分析": {
"prefix": "silu1",
"body": [
"/*",
"1.分析需求(交互)：",
"2.思路分析（事件三要素）",
"\t获取元素：事件源：",
"\t注册事件：事件类型",
"\t事件处理：",
"*/",
],
"description": "分析需求"
},
"根据思路实现需求": {
"prefix": "silu2",
"body": [
"//1.获取元素",
"let box = document.querySelector('css选择器');",
"//2.注册事件",
"box.onclick = function () {",
"\t//3.事件处理:",
"};",
],
"description": "根据思路实现需求"
},
"遍历对象": {
"prefix": "forin1",
"body": [
"for(let key in obj){",
"\tlet value = obj[key];",
"};",
],
"description": "遍历对象快捷语法"
},
"axios": {
"prefix": "axios",
"body": [
"axios({",
"\tmethod:'get',",
"\turl:'请求路径',",
"\tdata: { 'post请求参数'},",
"\tparams: { 'get请求参数'}",
"}).then(res=>{",
"\t//成功回调",
"\tconsole.log(res)",
"});",
],
"description": "axios请求"
},
"backgroundColor": {
"prefix": "bgc",
"body": [
"backgroundColor",
],
"description": "背景颜色"
},
"vue-router": {
"prefix": "vr",
"body": [
"//1.创建组件",
"let ym1 = {template:''};",
"let ym2 = {template:''};",
"let ym3 = {template:''};",
"//2.创建路由规则",
"let routes = [",
"\t{path:'/ym1',component:ym1},",
"\t{path:'/ym2',component:ym2},",
"\t{path:'/ym3',component:ym3},",
"]",
"//3.创建路由对象",
"let router = new VueRouter({routes});",
"//4.挂载路由",
"let app = new Vue({",
"\trouter,",
"}).$$mount('#app');",
],
"description": "快速生成路由"
},
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": true
},
}
包括settings.json里面的一些配置
{
"workbench.iconTheme": "vscode-icons",
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"less.compile":{
"out":"../css/"
},
"editor.tokenColorCustomizations": {
"comments": "#00CC00"
},
"workbench.colorTheme": "Monokai",
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": true
},
"[javascript]": {
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
},
"liveServer.settings.donotShowInfoMsg": true,
"liveServer.settings.donotVerifyTags": true,
"bracketPairColorizer.depreciation-notice": false,
"workbench.editor.enablePreview": false,
"[css]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"files.associations": {
"*.art": "html"
},
"[vue]": {
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
},
"eslint.enable": true,
"eslint.run": "onType",
"eslint.options": {
"extensions": [
".js",
".vue",
".jsx",
".tsx"
]
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"[json]": {
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
},
"[jsonc]": {
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
},
"window.zoomLevel": 1
}
