慧河2023/4/1培训

慧河2023/4/1培训

---

安装nodejs

安装vuecli

使用vuecli

---

vuecli工程的目录

src：项目核心文件

assets：静态资源

components：公共组件

router：路由（配置项目路由）

store：全局状态管理

App.vue：根组件

main.js：入口文件（全局配置文件，配置的内容全局可用）

.babelrc：babel编译参数

.editorconfig：代码格式

.gitignore：git上传需要忽略的文件配置

.postcssrc.js：转换css的工具

package.json：项目基本信息（在创建vue-cli项目后自动生成)，package.json是安装过程的记录，包含你的安装包以及安装版本，还有启动项目的指令

README.md：项目说明

详细可以参考https://blog.csdn.net/qq_42575395/article/details/101421404

---

vue的根组件和组件的关系（根组件中嵌套组件）

1、整个项目是一个主文件index.html,
2、index.html中会引入src文件夹中的main.js，
3、main.js中会导入顶级单文件组件App.vue，
4、App.vue中会通过组件嵌套或者路由来引用components文件夹中的其他单文件组件。

---

路由配置

router\index.js（路由配置文件）

// 路由配置文件

import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue' 
import AboutView from '../views/AboutView.vue'
import About2View from '../views/About2View.vue'

const routes = [
  // Home
  {
    path: '/',
    name: 'home',
    component: HomeView
  },

// 自己添加About2
  {
    path: '/about2',
    name: 'about2',
    // 箭头函数语法
    component: () => import('../views/About2View.vue')
  },

// About
  {
    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/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

views\About2.vue

<template lang="">
    <div>
        这里是About2View页面
    </div>
</template>
<script>
export default {
   
}
</script>
<style lang="">
    
</style>

views\About.vue

//单页面引擎
<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>