移动开发【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的总入口

比较完整的分析