vue-cli目录结构分析

vue3初始化一个项目，查看其项目结构，会发现比vue2的更加简洁。

package.json说明

项目的配置文件，定义了项目的基本信息以及项目的相关包依赖，npm运行命令等，位于项目根目录。

scripts: 定义了一些npm命令。

{
  "name": "TestConsole",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.19.2",
    "core-js": "^3.6.4",
    "element-ui": "^2.13.0",
    "portfinder": "^1.0.21",
    "sortablejs": "^1.10.2",
    "vue": "^2.6.11",
    "vue-axios": "^2.1.5",
    "vue-router": "^3.1.5"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.2.0",
    "@vue/cli-plugin-eslint": "~4.2.0",
    "@vue/cli-service": "~4.2.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.1.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,

如：

dependencies:运行时依赖(生产环境)

devDependencies:开发时的依赖(开发环境）

src/main.js是整个项目的入口文件

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false   //生产环境提示，这里设置成了false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }   //引入App组件
})
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false   //生产环境提示，这里设置成了false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }   //引入App组件
})

src/app.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

<script>
export default {  //export default {}  即导出这个组件，外部可以引用
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

src/router/index.js 路由文件

vue3并没有自动生成该文件，需要自己创建router文件夹，index.js文件

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'

Vue.use(Router)

export default new Router({
  routes: [//配置路由
    {
      path: '/',//访问路径
      name: 'Hello',//路由名成
      component: Hello//路由需要的组件
    }
  ]
})