移動開發【5】 Vue-cli 結構分析記錄

• 總體結構
  

package.json

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }

• scripts可以用什麼命令啓動冒號後面的命令，比如serve,npm run serve = 啓動，如果吧serve改成start（start比較特殊）則npm start即可

"dependencies": {
    "core-js": "^3.6.4",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.3.0",
    "@vue/cli-plugin-eslint": "~4.3.0",
    "@vue/cli-service": "~4.3.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  }

• 項目的依賴

babel.config.js

• es6等配置，暫時不懂，還沒用到

.gitignore

• git上傳的時候忽略某些文件

public

• favicon.ico :圖標（小的那個）
• index.html:入口

node_modules

• 依賴的包的存放位置，類似與Java中的library的性質
• npm installor cnpm install= 找到package.json 中的dependencies和devDependencies，吧這些依賴轉到node_modules裏面去

src

• assets:存放圖片，css之類
• components：組件
• *.vue文件的組成, *.vue的結構:

// HTML結構，只能有一個根標籤
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
</template>

<script>
// js部分
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* CSS樣式部分 */
</style>

• main.js ==js的總入口

比較完整的分析