VScode test Vue

One, MVVM thought

2. Introduction to Vue

Three, Vue build test

Four, Vue modular development

假如遇到vue不是内部命令

1.重新卸载 npm uninstall vue-cli -g

2.重新 npm install -g @vue/cli

vue is not an internal command

Four, VsCode integrates Vue

4.1 VsCode to open the Vue project

4.2 Vue project composition

build:与打包工具webpack有关的代码

config:配置相关的信息，包括端口之类

node_modules:项目里安装的依赖都在这里

src:我们编写代码的文件夹

static:存放静态文件，比如图片，字体文件等等

babelrc:语法转移相关的配置

index.html:首页内容

package.json:npm依赖包的一些配置信息，每安装一个依赖都会有相关依赖的dependence

package-lock.json:每个依赖的详细信息都会列出来

In a word, during development, we are at ease to pay attention to the code in src, and write corresponding functions in src

4.3 Vue running process

1. First, there is an index.html in the project, which is our main entry page, and there is only one div whose id is app.

2. There is a very important file in src, main.js, this is our main program, this program creates a Vue instance, which is used to mount the app element of index.html.

3. There is a router in it, imported from the router folder in the current directory.

4. Then, there is a component in main.js, which is imported from ./App in the current directory

5. The main.js specifies the template template, which is equivalent to using the <App/> component. What the component looks like, the index.html looks like.

6. App component includes three parts, template, script, style

route

4.4 Custom components

http://localhost:8081/#/hello

Five, integrate ElementUI rapid development

ElementUI

5.1 npm install elment

5.2 Pull-in ElementUI

5.3 Introducing Vue templates

File->Preferences->User sneppets

Vue templates

{
	// Place your snippets for vue 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')",
		"$2"
	  ],
	  "description": "Log output to console"
	},
	"Create VUE template": {
	  "prefix": "vue",
	  "body": [
		"<template>",
			  "  <div>",
			  "    <PageHeaderLayout>",
			  "      $1",
			  "    </PageHeaderLayout>",
		"  </div>",
		"</template>",
		"",
		"<script>",
		"// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
		"import PageHeaderLayout from '@/layouts/PageHeaderLayout'",
		"import ApeDrawer from '@/components/ApeDrawer'",
		"import ModalDialog from '@/components/ModalDialog'",
		"import ApeUploader from '@/components/ApeUploader'",
		"import ApeEditor from '@/components/ApeEditor' ",
		"import { mapGetters } from 'vuex'",
		"",
		"export default {",
		"  components: {",
		"    PageHeaderLayout,",
		"    ApeDrawer,",
		"    ModalDialog,",
		"    ApeUploader,",
		"    ApeEditor",
		"  },",
		"  // 定义属性",
		"  data() {",
		"    return {",
		"      $2",
		"    }",
		"  },",
		"  // 计算属性，会监听依赖属性值随之变化",
		"  computed: {",
		"    ...mapGetters(['userPermissions','buttonType'])",
		"  },",
		"  // 监控data中的数据变化",
		"  watch: {},",
		"  // 方法集合",
		"  methods: {",
		"    $3",
		"  },",
		"  // 生命周期 - 创建完成（可以访问当前this实例）",
		"  created() {",
		"    $4",
		"  },",
		"  // 生命周期 - 挂载完成（可以访问DOM元素）",
		"  mounted() {",
		"    $5",
		"  },",
		"  beforeCreate() {}, // 生命周期 - 创建之前",
		"  beforeMount() {}, // 生命周期 - 挂载之前",
		"  beforeUpdate() {}, // 生命周期 - 更新之前",
		"  updated() {}, // 生命周期 - 更新之后",
		"  beforeDestroy() {}, // 生命周期 - 销毁之前",
		"  destroyed() {}, // 生命周期 - 销毁完成",
		"  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发",
		"}",
		"</script>",
		"",
		"<style lang='stylus' scoped>",
		"  $6",
		"</style>"
	  ],
	  "description": "Create VUE template"
	}
  }

Official website , tutorials , video tutorials