vue实例的基本结构，有哪些配置属性方法？
在了解vue配置之前，我们首先要学会怎么创建一个vue项目，这里怎么搭建vue项目的环境，我就不说了，如果还有不懂的，可以自己查一下文档
一、怎么搭建vue项目
1，打开你要建立项目的文件夹，进入cmd找到进入当前文件下的路径
2，在当前目录下输入“vue init webpack-simple 项目名称（使用英文）”。
3，到当前项目的路径下，安装项目依赖包，运行命令：npm install ，程序会根据package.json的配置node_module依赖包
4，运行起项目，根据package.json中的配置，运行起项目，例如运行命令为：npm run dev（具体运行命令是根据项目中的配置决定的）
二，介绍一下vue项目中的文件具体作用
目录结构：
├── build // 构建发布代码存放的位置
├── config // 配置目录，端口号等
├── node_module // 执行npm install产生的，包含项目中运行所产生的依赖包
├── src // 源代码，我们编辑的文件一般都在这里面
│ ├── api // 接口
│ ├── assets // 主题 字体 图片 公告css等静态资源
│ ├── components // 全局公用组件
│ ├── directive // 全局指令
│ ├── filtres // 全局 filter
│ ├── icons // 项目所有 svg icons
│ ├── lang // 国际化 language
│ ├── mock // 项目mock 模拟数据
│ ├── router // 路由
│ ├── store // 全局 store管理
│ │ ├── index.js //注入所有vuex相关，并导出
│ │ ├── getters.js //store的计算属性
│ │ ├── muattion.js //更改store中的状态（唯一方法）
│ │ ├── state.js //储存状态
│ │ └── actions.js //维护异步数据
│ └── Tinymce // 富文本
│ ├── styles // 全局样式
│ ├── utils // 全局公用方法
│ ├── vendor // 公用vendor
│ ├── views // view
│ ├── App.vue // 入口页面
│ ├── main.js // 入口 加载组件 初始化等
│ └── permission.js // 权限管理
├── static // 第三方不打包资源
│ └── Tinymce // 富文本
├── .babelrc // babel-loader 配置，ES代码相关转化配置
├── editorconfig // 项目文本相关配置
├── eslintrc.js // eslint 配置项
├── .gitignore // git 仓库忽略的文件夹配置
├── .postcssrc.js // css相关转化的配置
├── favicon.ico // favicon图标
├── index.html // html模板
└── package.json // package.json
以上是我查了一些资料，对vue项目文件夹中的具体介绍
三，介绍vue的基本结构
<template>
<div class="hello">
<!-- html书写范围 只能有一个根目录-->
<h1>{{ msg }}</h1>
</div>
</template>
<script>
// js 业务实现逻辑
export default {
name: "HelloWorld",
props: {
msg: String
},
data() {//这里必须返回一个初始化数据对象的函数，所以要return返回
return {
//初始化数据
msg: "今天天气真棒"
};
},
beforeCreate() {
// 组件初始化执行的函数
// 在beforeCreate函数执行前，data和mothods中的数据还没有初始化
},
created() {
// data和mothods都已经被初始化，但页面还未显示
//最早只能在created中操作
},
beforeMount() {
// 组件挂载前，模板已经在内存编译好了，
//但尚未挂载到页面中，此时页面还是旧的数据
},
mounted() {
// 如果要通过某些插槽操作页面上的DOM节点，最早要在mounted中进行
// 组件挂载后，方法执行后，页面显示
// 此时组件已经脱离了创建阶段，进入运行阶段
},
beforeUpdate() {
// data数据是最新的，页面尚未和最新的数据保持同步，页面中的显示的数据还是旧的
// 数据更新时调用
},
updated() {
//组件更新，方法执行后，页面显示都是最新数据
},
beforeDestroy() {
// 实例销毁之前调用。在这一步，实例仍然完全可用。
},
destroyed() {
// Vue 实例销毁后调用。调用后，
// Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，
// 所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
},
watch: {
// watch监听方法，擅长处理的场景：一个数据影响多个数据
},
computed: {
// computed擅长处理的场景：一个数据受多个数据影响
// 计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。
},
methods: {
// 页面事件的方法
}
};
</script>
<style scoped>
/* css 界面布局代码 scoped：防止各页面中css互相影响 */
</style>
四，render 与 template
new Vue({
el: '#app',
components: { App },
template: '<App/>',
})
new Vue({
el: '#app',
render: h = > h(App)
})
五，packjson中的内容
{
"name": "vueactualcombat", // 项目的名字
"version": "0.1.0", // 项目的版本
"private": true, // 项目在npm将拒绝发布它
"scripts": {
"serve": "vue-cli-service serve", // 项目启动的指令配置
"dev": "vue-cli-service serve", // 项目启动的指令配置
"build": "vue-cli-service build", // 项目打包的指令配置
"lint": "vue-cli-service lint" // 项目初始化的指令配置
},
"dependencies": { // 能够正常运行所依赖的包，在使用 npm install 安装你的包时会自动安装这些依赖
"element-ui": "^2.4.5",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
......
},
"devDependencies": { // 开发应用时所依赖的工具包，通常是一些开发、测试、打包工具，
// 例如 webpack、ESLint、Mocha。应用正常运行并不依赖于这些包，用户在使用 npm install 安装你的包时也不会安装这些依赖
"@vue/cli-plugin-babel": "^4.5.0",
"@vue/cli-plugin-eslint": "^4.5.0",
"@vue/cli-plugin-router": "^4.5.0"
......
}
}
在 package.json 文件里面提现出来的区别就是：
npm i 【包名】 --save-dev 安装的包，会被写入到 devDependencies 对象里面去；
npm i 【包名】 --save 安装的包，则被写入到 dependencies 对象里面去。
devDependencies 里面的插件(比如各种loader，babel全家桶及各种webpack的插件等)只用于开发环境，不用于生产环境，因此不需要打包；
dependencies 是需要发布到生产环境的，是要打包的。
六，为什么组件 data 是一个函数
1，如果 data 不是一个函数，Vue 会报错
2，Vue 组件让每个组件对象都返回一个新对象，当触发改组件时候，数据中的 data 会自动更新成最新的数据，而不是停留在上一个组件中的旧数据
以上就是我对vue的一个大致的了解；如果是同一个对象，组件多次使用会互相影响
