yeb 项目名称

  • node_modules 依赖文件——通过npm install进行下载依赖
  • public 公用的目录
    • favicon.ico logo图标
    • index.html 页面入口、首页(模板页)——实际开发用不到
  • src 源码目录
    • assets 静态资源文件
    • components 组件目录
    • router 路由目录
      • index.js
//先把跳转的一些组件导入进来
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'


//使用路由依赖
Vue.use(VueRouter)


//配置路由
const routes = [
  {
    path: '/',//跳转路径
    name: 'Home',//路由名称
    component: Home//路由要跳转的组件
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    //不提前导入组件,在使用的时候导入组件——懒加载
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]


const router = new VueRouter({
  routes
})


export default router
  - views 页面目录
     - Home.vue
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>




     - App.vue 
<template>
  <div>
    <div>
      //跳转链接
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    //渲染路由匹配组件
    <router-view/>
  </div>
</template>
     - main.js 项目程序入口
import Vue from 'vue'
import App from './App.vue'
import router from './router'


Vue.config.productionTip = false //关闭浏览器控制台关于环境相关提示


new Vue({
  router,
  render: h => h(App)
}).$mount('#app')//手动挂载点
  - .gitignore Git配置文件
  - babel.config.js babel配置文件——主要功能是:将ES6语法转换成ES5
  - package.json vue项目配置主文件
{
            "name": "yeb",//项目名称
            "version": "0.1.0",//版本号
            "private": true,//是否是私有的
            "scripts": {//封装常用命令
              "serve": "vue-cli-service serve",//启动服务
              "build": "vue-cli-service build" //构建项目
            },
            "dependencies": {//正式环境下用到的依赖
                "core-js": "^3.6.5",
                "element-ui": "^2.15.6",
                "vue": "^2.6.11",
                "vue-router": "^3.2.0"
            },
            "devDependencies": {//开发环境下用到的依赖
                "@vue/cli-plugin-babel": "~4.5.0",
                "@vue/cli-plugin-router": "~4.5.0",
                "@vue/cli-service": "~4.5.0",
                "vue-template-compiler": "^2.6.11"
            },
}