Vue项目开发，单文件组件，Vite构建工具与内置 create-vue 脚手架工具，路由

单文件组件（.vue文件），简称sfc

是一种特殊的文件格式，使我们能够将一个 Vue 组件的模板、逻辑与样式封装在单个文件中。

template->组件的模版结构，每个组件必须包含

script->组件的js行为

style->组件的样式

.vue单文件组件浏览器不能直接运行 html css js

用预处理工具将浏览器能识别的

构建工具：把.vue文件编译成浏览器能识别的thml,css,js

                将.scs:（预处理）--->.css

压缩文件  Typescript  .ts--->.js

兼容性问题    es6语法  ：  let  const---->var

构建工具有哪些：webpack(vue2用的多  vue3也用)  vite（vue3）   gulp 

webpack：

四大组件:入口，出口，loader,(例如loader(vue-loader))，插件plugin

把.vue文件编译成浏览器可识别的文件

脚手架 webpack常用配置已经配置好，直接使用

.vue文件，直接编译运行。

---

 Vite构建工具与内置 create-vue 脚手架工具

• Vite 是一个轻量级的、速度极快的构建工具，对 Vue SFC 提供第一优先级支持。作者是尤雨溪，同时也是 Vue 的作者！

1.npm init vue@latest

2.项目名（可以自取可以默认）

3.是否支持，暂时选No

4.cd vue-cart -project（vue-cart -project是我自己取的项目名）

5.npm i (下载依赖)

6.npm run dev

自动生成一个域名，按Ctrl点击、或者复制域名在浏览器中打开。

项目的目录工具：

---

 路由

路由作用：单页SPA进行路由跳转

• 单页应用与多页应用 

实现方式：

• hash值
• histroy

http://ip:port/index/#login  ---->login

http://ip:port/index/#home    ------>home

安装

router插件使用：

1. 安装 router 插件

       npm install vue-router@4 --save

       对应vue3.x版本

2. 创建路由模块文件 router.js
    (在router目录创建index.js)

  

    1>. 导入路由插件vue-router

   import {createRouter, createWebHashHistory, createWebHistory} from "vue-router";  

3>. 暴露路由模块

    

2>. 创建路由对象，配置路由规则

const vueRouter = new VueRouter({

  routes: [

    {

      path: '/',

      component: News

    },

    {

      path: '/user',

      component: ()=> import('@/components/User.vue')

    }

  ]

});

     

router插件使用二：

1. main.js 入口文件中集成路由插件到 vue

import Vue from 'vue'

import App from './App.vue'

import router from './router.js'

createApp(App)

 .use(router)

 .mount('#app')

 <router-link to="/nba">NBA</...>相当于a标签进行一个页面跳转

 <router-link to="｛path:'/nab',query:{message:"123”}｝">NBA</...>

接收参数：$route.query.message

动态传参：

｛

   path:/detail/:id'

   compontents:detail

｝

 <router-link to=｛path:'/detail/1001'}｝>NBA</...>

2. 路由输出组件位置

<router-view></router-view>

 路由传参： 

 动态路由：

 命名示图：将多个vuex引入，创建路由对象的时候写在一起。用的时候会出现多个vue.

 路径路由与命名路由:通过name进行跳转 

嵌套路由:

1 找到要嵌套的根组件,嵌套进去。

2.对要点击的地方写<router-link to="">

 3 子路由输出的位置

重定向和错误处理：

      redirect: '/user', // 重定向到user路由

  // 404路由不存在匹配，放在路由最下面
    {
        path:'/:pathMatch(.*)*',
        component:()=>import('@/views/NotPage.vue')
    }

导航守卫：

全局导航：只要路由跳转都会执行

在permisson.js中写：

import router from './router'
/**
 * 全局前置导航守卫 beforeEach
 *    只要路由跳转都会执行
 * to: 即将要进入的目标 
   from: 当前导航正要离开的路由 
   login -> home
    return false 不放行

      业务: 统一登录身份认证
            登录身份认证
              => 没有登录的情况不允许访问需要登录的页面   
            如何实现?
               1. 登录成功，保存成功的登录状态
               2. 在前置导航守卫中判断保存的登录状态是否存在， 
                   如果存在，表示登录成功，放行 return true
                   如果不存在， 更优雅，重定向到登录界面
 */
router.beforeEach((to, from) => {
    // console.log('全局前置导航守卫 >>>>')
    // console.log('to :', to, ' from ', from)

    // 1. 加入白名单: 有些路由是不需要登录身份认证 path: /login ,  /
    if (to.path === '/login') {
        return true //放行
    }
    // 2. 登录认证
    let user = localStorage.getItem('USER')
    if (user) {
        return true // 放行
    } else {
        // 如果不存在， 更优雅，重定向到登录界面
        router.replace({ path: '/login' })
    }
})

// 全局后置导航守卫
router.afterEach((to, from) => {
    console.log('afterEach >>> to :', to)
})

在登录页面写：

<template>
    <div>
        <form @submit.prevent="bindLogin">
            <input type="text" placeholder="请输入用户" v-model="user.name"/><br />
            <input type="text" placeholder="请输入密码" v-model="user.password"/><br />
            <p>{{message}}</p>
            <input type="submit" value="登录" />
            
        </form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            user:{
                name:'',
                password:''
            },
            message:''
        }
    },
    methods: {
        bindLogin() {
            if(this.user.name === 'admin' && this.user.password === '123'){
                // 1. 保存登录状态
                localStorage.setItem('USER',JSON.stringify(this.user))   
                // 2. 跳转主界面
                this.$router.push({ path: '/home' })
            }else{
                this.message = '用户名或密码出错!'
            }
        },
    },
}
</script>

在退出中写：

 <button @click="bindExit">退出</button>

<script>
    export default {
        methods:{
            bindExit(){
                localStorage.removeItem('USER') // 清除登录状态
                this.$router.replace({path:'/login'})       
            }
        }
    }
</script>

这就是导航守卫的完整过程。