vue實例的基本結(jié)構(gòu)袒炉，有哪些配置屬性方法？
在了解vue配置之前付材，我們首先要學(xué)會怎么創(chuàng)建一個vue項目朦拖，這里怎么搭建vue項目的環(huán)境，我就不說了厌衔，如果還有不懂的璧帝，可以自己查一下文檔
一、怎么搭建vue項目
1富寿，打開你要建立項目的文件夾睬隶，進(jìn)入cmd找到進(jìn)入當(dāng)前文件下的路徑
2，在當(dāng)前目錄下輸入“vue init webpack-simple 項目名稱（使用英文）”页徐。
3苏潜，到當(dāng)前項目的路徑下，安裝項目依賴包变勇，運行命令：npm install 恤左，程序會根據(jù)package.json的配置node_module依賴包
4，運行起項目搀绣，根據(jù)package.json中的配置飞袋，運行起項目，例如運行命令為：npm run dev（具體運行命令是根據(jù)項目中的配置決定的）
二豌熄，介紹一下vue項目中的文件具體作用
目錄結(jié)構(gòu)：
├── build // 構(gòu)建發(fā)布代碼存放的位置
├── config // 配置目錄授嘀，端口號等
├── node_module // 執(zhí)行npm install產(chǎn)生的，包含項目中運行所產(chǎn)生的依賴包
├── src // 源代碼锣险，我們編輯的文件一般都在這里面
│ ├── api // 接口
│ ├── assets // 主題 字體 圖片 公告css等靜態(tài)資源
│ ├── components // 全局公用組件
│ ├── directive // 全局指令
│ ├── filtres // 全局 filter
│ ├── icons // 項目所有 svg icons
│ ├── lang // 國際化 language
│ ├── mock // 項目mock 模擬數(shù)據(jù)
│ ├── router // 路由
│ ├── store // 全局 store管理
│ │ ├── index.js //注入所有vuex相關(guān)蹄皱，并導(dǎo)出
│ │ ├── getters.js //store的計算屬性
│ │ ├── muattion.js //更改store中的狀態(tài)（唯一方法）
│ │ ├── state.js //儲存狀態(tài)
│ │ └── actions.js //維護(hù)異步數(shù)據(jù)
│ └── Tinymce // 富文本
│ ├── styles // 全局樣式
│ ├── utils // 全局公用方法
│ ├── vendor // 公用vendor
│ ├── views // view
│ ├── App.vue // 入口頁面
│ ├── main.js // 入口 加載組件 初始化等
│ └── permission.js // 權(quán)限管理
├── static // 第三方不打包資源
│ └── Tinymce // 富文本
├── .babelrc // babel-loader 配置览闰，ES代碼相關(guān)轉(zhuǎn)化配置
├── editorconfig // 項目文本相關(guān)配置
├── eslintrc.js // eslint 配置項
├── .gitignore // git 倉庫忽略的文件夾配置
├── .postcssrc.js // css相關(guān)轉(zhuǎn)化的配置
├── favicon.ico // favicon圖標(biāo)
├── index.html // html模板
└── package.json // package.json
以上是我查了一些資料，對vue項目文件夾中的具體介紹
三巷折，介紹vue的基本結(jié)構(gòu)
<template>
<div class="hello">
<!-- html書寫范圍 只能有一個根目錄-->
<h1>{{ msg }}</h1>
</div>
</template>
<script>
// js 業(yè)務(wù)實現(xiàn)邏輯
export default {
name: "HelloWorld",
props: {
msg: String
},
data() {//這里必須返回一個初始化數(shù)據(jù)對象的函數(shù)压鉴，所以要return返回
return {
//初始化數(shù)據(jù)
msg: "今天天氣真棒"
};
},
beforeCreate() {
// 組件初始化執(zhí)行的函數(shù)
// 在beforeCreate函數(shù)執(zhí)行前，data和mothods中的數(shù)據(jù)還沒有初始化
},
created() {
// data和mothods都已經(jīng)被初始化锻拘，但頁面還未顯示
//最早只能在created中操作
},
beforeMount() {
// 組件掛載前油吭，模板已經(jīng)在內(nèi)存編譯好了，
//但尚未掛載到頁面中署拟，此時頁面還是舊的數(shù)據(jù)
},
mounted() {
// 如果要通過某些插槽操作頁面上的DOM節(jié)點婉宰，最早要在mounted中進(jìn)行
// 組件掛載后，方法執(zhí)行后推穷，頁面顯示
// 此時組件已經(jīng)脫離了創(chuàng)建階段心包，進(jìn)入運行階段
},
beforeUpdate() {
// data數(shù)據(jù)是最新的，頁面尚未和最新的數(shù)據(jù)保持同步馒铃，頁面中的顯示的數(shù)據(jù)還是舊的
// 數(shù)據(jù)更新時調(diào)用
},
updated() {
//組件更新蟹腾，方法執(zhí)行后，頁面顯示都是最新數(shù)據(jù)
},
beforeDestroy() {
// 實例銷毀之前調(diào)用区宇。在這一步娃殖，實例仍然完全可用。
},
destroyed() {
// Vue 實例銷毀后調(diào)用议谷。調(diào)用后炉爆，
// Vue 實例指示的所有東西都會解綁定，所有的事件監(jiān)聽器會被移除柿隙，
// 所有的子實例也會被銷毀叶洞。 該鉤子在服務(wù)器端渲染期間不被調(diào)用。
},
watch: {
// watch監(jiān)聽方法禀崖，擅長處理的場景：一個數(shù)據(jù)影響多個數(shù)據(jù)
},
computed: {
// computed擅長處理的場景：一個數(shù)據(jù)受多個數(shù)據(jù)影響
// 計算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的衩辟。只在相關(guān)響應(yīng)式依賴發(fā)生改變時它們才會重新求值。
},
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中的內(nèi)容
{
"name": "vueactualcombat", // 項目的名字
"version": "0.1.0", // 項目的版本
"private": true, // 項目在npm將拒絕發(fā)布它
"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": { // 開發(fā)應(yīng)用時所依賴的工具包掸屡，通常是一些開發(fā)封寞、測試、打包工具仅财，
// 例如 webpack狈究、ESLint、Mocha盏求。應(yīng)用正常運行并不依賴于這些包抖锥，用戶在使用 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 文件里面提現(xiàn)出來的區(qū)別就是：
npm i 【包名】 --save-dev 安裝的包亿眠，會被寫入到 devDependencies 對象里面去；
npm i 【包名】 --save 安裝的包磅废，則被寫入到 dependencies 對象里面去纳像。
devDependencies 里面的插件(比如各種loader，babel全家桶及各種webpack的插件等)只用于開發(fā)環(huán)境拯勉，不用于生產(chǎn)環(huán)境竟趾，因此不需要打包；
dependencies 是需要發(fā)布到生產(chǎn)環(huán)境的宫峦，是要打包的岔帽。
六，為什么組件 data 是一個函數(shù)
1导绷，如果 data 不是一個函數(shù)山卦，Vue 會報錯
2，Vue 組件讓每個組件對象都返回一個新對象诵次，當(dāng)觸發(fā)改組件時候，數(shù)據(jù)中的 data 會自動更新成最新的數(shù)據(jù)枚碗，而不是停留在上一個組件中的舊數(shù)據(jù)
以上就是我對vue的一個大致的了解逾一；如果是同一個對象，組件多次使用會互相影響
