VScode测试Vue

一、MVVM思想

二、Vue简介

三、Vue搭建测试

四、Vue模块化开发

假如遇到vue不是内部命令

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

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

vue不是内部命令

四、VsCode整合Vue 4.1 VsCode打开Vue项目

4.2 Vue项目组成

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

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

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

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

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

babelrc:语法转移相关的配置

index.html:首页内容

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

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

一句话，我们开发期间都安心关注src里面的代码，在src里面编写相应的功能

4.3 Vue运行流程

1.首先，项目里面有一个index.html，这是我们的主入口页面，只有一个div它的id是app。

2.在src里面有一个非常重要的文件，main.js，这个就是我们的主程序，这个程序创建了一个Vue实例，它来挂载index.html的app元素。

3.里面有一个router，从当前目录的router文件夹，导入进来的。

4.然后，main.js里面有一个组件components，它从当前目录的./App导入

5.main.js指定了template模板，相当于使用了组件，组件长什么样，index.html就长什么样。

6.App组件包括三个部分，template,script,style

route路由

4.4 自定义组件

http://localhost:8081/#/hello

五、整合ElementUI快速开发

ElementUI

5.1 npm安装elment

5.2 引入ElementUI

5.3 引入Vue模板

File->Preferences->User sneppets

Vue模板

{
	// 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": [
		"",
			  "  
",
			  "    ",
			  "      $1",
			  "    ",
		"  
",
		"",
		"",
		"",
		"// 这里可以导入其他文件（比如：组件，工具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缓存功能，这个函数会触发",
		"}",
		"",
		"",
		"",
		"  $6",
		""
	  ],
	  "description": "Create VUE template"
	}
  }

官网、教程、视频教程