【谷粒商城基础篇】前端开发基础知识_vue uncaught referenceerror: can't access lexical

作者：IT小白 | 2024-07-21 18:48:25

踩

vue uncaught referenceerror: can't access lexical declaration 'datacomponent

在这里插入图片描述

谷粒商城笔记合集

分布式基础篇	分布式高级篇	高可用集群篇
===简介&环境搭建===
项目简介与分布式概念（第一、二章）
基础环境搭建（第三章）
===整合SpringCloud===
整合SpringCloud、SpringCloud alibaba（第四、五章）
===前端知识===
前端开发基础知识（第六章）
===商品服务开发===
商品服务开发：基础概念、三级分类（第七、八章）
商品服务开发：品牌管理（第九章）
商品服务开发：属性分组、平台属性（第十、十一章）
商品服务：商品维护（第十二、十三章）
===仓储服务开发===
仓储服务：仓库维护（第十四章）
基础篇总结（第十五章）

六、前端开发基础知识

6.1 VSCode 使用

6.1.1 下载安装

下载VsCode：https://code.visualstudio.com/
安装VsCode

VsCode安装插件

Auto Close Tag：自动闭合HTML/XML标签
Auto Rename Tag：自动完成另一侧标签的同步修改
Chinese（Simplified）

ESLint：语法纠错

配置 setting.json

打开 VSCode 左上角文件-首选项-设置，在设置中搜索eslint，点击并翻页到最下面，点击setting.json进行配置并保存：

{
    "workbench.colorTheme": "Visual Studio Dark",
    // 值设置为true时，每次保存的时候自动格式化；值设置为false时，代码格式化请按shift+alt+F
    "editor.formatOnSave": true,
    // 每次保存的时候将代码按eslint格式进行修复:
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ],
    "eslint.enable": true,
    "eslint.run": "onType",
    "eslint.options": {
        "extensions": [
            "js",
            "vue",
            ".jsx",
            ".tsx"
        ]
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.format.enable": true,
    "eslint.lintTask.enable": true,
    "[vue]": {
        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

在任意文件：鼠标右键->使用…格式化文档->配置默认格式程序->选择eslint

这样之后 alt+Shift+f 之后就是按照 eslint 规则保存

HTML CSS Support：让 html 标签上写class 智能提示当前项目所支持的样式
HTML Snippets
JavaScript（ES6）：ES6 语法智能提示以及快速输入，除j外还支持.ts, .jsx， .tsx， .html, .vue;省去了配置其支持各种包含is代码文件的时间
Live server
open in browser：直接右键项目单击启动
Vetur：语法高亮，智能感知包含格式化功能，Alt+Shift+F (格式化全文) ，Ctrl+K Ctrl+F (格式化选中代码，两个Ctrl需要同时按着)
Vue 2 Snippets：vue语法提示

在这里插入图片描述

重启VsCode

6.1.2 创建项目

vscode 很轻量级，本身没有新建项目的选项，创建一个空文件夹就可以当做一个项目

在这里插入图片描述

6.1.3 创建网页

新建文件，命名为 index.html
快捷键 ! ，快速创建网页模板
h1 + 回车，自动补全标签

6.1.4 运行

在这里插入图片描述

6.1.5 快捷键

ALT+SHIFT+f		//代码格式化
1

6.1.6 用户代码片段

Visual Studio Code —> 文件 —> 首选项 —> 配置用户 —> 代码片段

{
	"http-get 请求": {
		"prefix": "httpget",
		"body": [
			"this.\\$http({",
			"url: this.\\$http.adornUrl(''),",
			"method: 'get',",
			"params: this.\\$http.adornParams({})",
			"}).then(({data}) => {",
			"})"
		],
		"description": "httpGET 请求"
	},
	"http-post 请求": {
		"prefix": "httppost",
		"body": [
			"this.\\$http({",
			"url: this.\\$http.adornUrl(''),",
			"method: 'post',",
			"data: this.\\$http.adornData(data, false)",
			"}).then(({ data }) => { });"
		],
		"description": "httpPOST 请求"
	},
    "vue": {
		"prefix": "vue",
		"body": [
			"<template>",
			"  <div class=''></div>",
			"</template>",
			"",
			"<script>",
			"// 这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json文件，图片文件等等）",
			"// 例如：import 《组件名称》 from '《组件路径》';",
			"",
			"export default {",
			"  // import 引入的组件需要注入到对象中才能使用",
			"  components: {},",
			"  props: {},",
			"  data () {",
			"    return {",
			"",
			"    }",
			"  },",
			"  computed: {},",
			"  watch: {},",
			"  methods: {",
			"",
			"  },",
			"  // 生命周期 - 创建完成（可以访问当前 this 实例）",
			"  created () {",
			"",
			"  },",
			"  // 生命周期 - 挂载完成（可以访问 DOM 元素）",
			"  mounted () {",
			"",
			"  },",
			"  beforeCreate () {},",
			"  beforeMount () {},",
			"  beforeUpdate () {},",
			"  updated () {},",
			"  beforeDestroy () {},",
			"  destroyed () {},",
			"  activated () {}",
			"}",
			"</script>",
			"",
			"<style lang='scss' scoped>",
			"  // @import url($3); 引入公共 css 类",
			"  $4",
			"</style>"
		],
		"description": "生成 vue 模板"
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75