vue-cli项目运行流程介绍

news2024/11/27 1:24:22

一、前言

本文介绍 vue-cli搭建的项目运行流程，基于已经搭建好的基础项目。关于 vue-cli 构建项目的详细流程，可参考博文：使用vue脚手架构建项目

二、main.js

项目运行会加载入口文件 main.js

/*  
 html文件中，通过script src = 'xxx'标签引入js文件。
 而vue中，通过 import 变量名 from 文件路径 的方式导入文件，不光可以导入js文件。
 1.变量名: 指的是为导入的文件起一个名称，不是指导入的文件的名称，相当于变量名。
 2.文件路径: 指的是文件的相对路径
*/
import Vue from 'vue'    
import App from './App.vue'
import router from './router'
//关闭启动提示
Vue.config.productionTip = false
//创建Vue实例
new Vue({
  router, //为整个项目添加路由
  render: h => h(App) //这是一个函数ES6语法,作用是生成模板: App = App.vue
}).$mount('#app') //挂载的是App.vue组件中的id为app的区域

三、App.vue

App.vue 是vue项目的主组件，是页面入口文件，所有页面都是在App.vue下进行切换的

App.vue 中的模板(HTML代码)
<template>
  <div id="app"> 挂载的是这个div
      
    <div id="nav">
     这里是两个路由导航链接
       1. to="/" 项目根路径 跳转的是首页
      <router-link to="/">Home</router-link> |
       2. to="/about" 点击About按钮,跳转到about组件
      <router-link to="/about">About</router-link>
    </div>
     
   router-view 的作用是 根据访问的路径,渲染路径匹配到的视图组件
    <router-view/>
  </div>
</template>

四、router 路由

// 引入所需文件
import Vue from 'vue'  //vue库
import VueRouter from 'vue-router'  //vue-router库
import Home from '../views/Home.vue' //首页
//使用路由功能
Vue.use(VueRouter)
//创建路由规则
const routes = [
 {
    path: '/', //路径
    name: 'Home', //名称
    component: Home  //组件 Home.vue
 },
 {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ 
'../views/About.vue')
 }
]
//创建路由管理器,管理routes
const router = new VueRouter({
  routes
})
//export 用来导出模块 router就代表了整个路由文件
export default router

五、Home.vue组件

默认访问的是Home.vue 首页

视图部分
<template>
  <div class="home">
   首页的logo
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>
JS部分
<script>
    
//导入了一个组件 HelloWorld.vue @符号表示 src这个目录
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'Home', 
  components: { 
    HelloWorld
 }
}
</script>

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
     For a guide and recipes on how to configure / customize this project,<br>
     check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli 
documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
 }
}
</script>