一、IDEA搭建vue/cli脚手架

image-20220412200627701

取消使用默认项目设置

目录结构

1. build 文件夹：用于存放 webpack 相关配置和脚本。开发中仅 偶尔使用 到此文件夹下 webpack.base.conf.js 用于配置 less、sass等css预编译库，或者配置一下 UI 库。
2. config 文件夹：主要存放配置文件，用于区分开发环境、线上环境的不同。 常用到此文件夹下 config.js 配置开发环境的 端口号、是否开启热加载 或者 设置生产环境的静态资源相对路径、是否开启gzip压缩、npm run build 命令打包生成静态资源的名称和路径等。
3. dist 文件夹：默认 npm run build 命令打包生成的静态资源文件，用于生产部署。
4. node_modules：存放npm命令下载的开发环境和生产环境的依赖包。
5. src: 存放项目源码及需要引用的资源文件。
6. src下assets：存放项目中需要用到的资源文件，css、js、images等。
7. src下componets：存放vue开发中一些公共组件：header.vue、footer.vue等。
8. src下emit：自己配置的vue集中式事件管理机制。
9. src下router：vue-router vue路由的配置文件。
10. src下service：自己配置的vue请求后台接口方法。
11. src下page：存在vue页面组件的文件夹。
12. src下util：存放vue开发过程中一些公共的.js方法。
13. src下vuex：存放 vuex 为vue专门开发的状态管理器。
14. src下app.vue：使用标签`<route-view></router-view>`渲染整个工程的.vue组件。
15. src下main.js：vue-cli工程的入口文件。
16. index.html：设置项目的一些meta头信息和提供`<div id="app"></div>`用于挂载 vue 节点。
17. package.json：用于 node_modules资源部 和 启动、打包项目的 npm 命令管理。

二、项目执行顺序

main.js是项目的入口，浏览器一开始加载就是加载main.js，其中里面通过import的方式引入了各种资源，然后新建了一个vue实例。

import { createApp } from 'vue'  // 引入vue框架,vue2为import Vue from ‘vue’，
import App from './App.vue'  // 引入App.vue组件（项目的根组件）
import router from './router' // 引入路由
import store from './store' // 引入store资源
// import 自定义名字 from ‘’(可省略后面的.vue)

createApp(App).use(store).use(router).mount('#app')
// vue2为下
// new Vue({
//     router,
//     store,
//     render: h => h(App)    //渲染函数,这个函数用来渲染组件(App.vue)的，h()里面可以传入任意想渲染的组件
、、
// }).$mount('#app') //手动挂载到id为#app的地方
//主要在public下的index.html，其中< div id=“app”>将会被组件替换掉，即所谓的挂载。

通俗的来讲，createApp(App)的那段代码就是将根组件App.vue下的< template>< /template>中间的html代码渲染完之后替代public下的index.html中id为app的html片段

随后访问的其实就是public下的index.html，只不过其内容由根组件决定

根组件

<template>
  <div id="app">
    hello
    <router-view></router-view>
  </div>
</template>

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

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

根组件一般不放东西，只放路由，然后根据路由规则（当前的url）切换对应的组件内容进行展示

router-view

<router-view></router-view>对应的是router下的index.js，里面可以配置访问路径和路径对应的组件

router-view 当你的路由path 与访问的地址相符时，会将指定的组件替换该 router-view

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue' // 引入组件

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView // 注册组件
  },
  {
    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: createWebHistory(process.env.BASE_URL), //使访问的url地址没有#
  routes
})

export default router

组件示例

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @是/src的别名
import HelloWorld from '@/components/HelloWorld.vue' // 导入组件并注册后即可<HelloWorld>使用组件

export default {  // 暴露当前组件，才可以被外部使用
  name: 'HomeView', // 组件名
  components: {  // 组测组件
    HelloWorld
  },
  data() {
    return {
      msg:"xiaochen",
      user:[
        {
          "id":1,
          "name":"cyh"
        },
        {
          "id":2,
          "name":"czh"
        }
      ]
    }
  },
  methods:{
    
  },
  created() {// 生命周期
  }
}
</script>
<style>

</style>

Q.E.D.

   七岁几胆敢预言自己，操一艘战机