vue-cli

1.安装node.js

下载链接:Node.js百度网盘链接   提取码:6666

安好后使用 cnpm -v查看版本是否成功

成功后直接安装vue脚手架

cnpm install  -g vue-cli 

安装webpack(打包)

cnpm install webpack -g

2.创建项目

2.1 使用命令创建

vue create 项目名称

待项目完成后使用

cd 项目名

进入你的项目目录中启动:

npm run serve

【注:一定要进入你的项目目录中启动方可成功】

 

2.2 图形化创建项目

在vue-cli安装完成后,可使用图形化方式创建项目

cmd 输入:

  vue ui

创建完项目后直接找个编译器打开那个项目目录即可,这里使用vs code编译器打开

 

3.vue项目需要

3.1 配置路由注意:

  {
    path: '/test',
    name: 'test',
    component: () => import('@/views/TestViewPage.vue')
  },

【注:其中@表示src目录,其指定的路径是绝对路径】

【注:如果不使用绝对路径也可以使用相对路径  ../views/TestViewPage.vue 】

 

3.2 安装Element-ui需要

npm install element-ui -S  

下载后需在main.js文件中进行注册使用:

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)

 

3.3 安装axios需要

npm install axios -S

下载后可以注册成为全局变量进行使用:

import axios from 'axios'
const instance = axios.create({
baseURL:'http://localhost:8080/'
})

注册全局变量

Vue.prototype.$axios = instance

 

3.4 配置端口号需要

在vue.config.js文件中配置端口号
在此文件中新添加以下内容:

devServer:{
port:7000,
}

 

3.5 路由进度条配置需要

npm install --save nprogress

随后在main.js文件中添加配置:

import NProgress from 'nprogress';
import 'nprogress/nprogress.css';


NProgress.configure({     
  easing: 'ease',  // 动画方式    
  speed: 500,  // 递增进度条的速度    
  showSpinner: false, // 是否显示加载ico    
  trickleSpeed: 200, // 自动递增间隔    
  minimum: 0.3 // 初始化时的最小百分比
})

//当路由进入前
 router.beforeEach((to, from , next) => {
     // 每次切换页面时,调用进度条
    NProgress.start();
    // 这个一定要加,没有next()页面不会跳转的
     next();
 });
//当路由进入后:关闭进度条
router.afterEach(() => {  
    // 在即将进入新的页面组件前,关闭掉进度条
    NProgress.done()
})

 

3.6 后端跨域需要

打开idea创建springboot项目中,创建config配置层,创建GlobalCorsConfig配置文件

@Configuration
public class GlobalCorsConfig implements WebMvcConfigurer{
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowCredentials(true)
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .maxAge(3600);
    }


}

 

3.7 前端路由嵌套需要

首先需要在router中的index.js文件中,找到你需要要的父组件路由,在将需要在其中的子组件嵌套进去

  {
    path: '/main',
    name: 'main',
    component: () => import('@/views/main/MainView.vue'),
    children:[
      {
        path: '/test',
        name: 'test',
        component: () => import('@/views/TestViewPage.vue')
      },
    ]
  },

且需要在父组件页面中跳转到子组件处:

 <el-menu-item-group>
          <el-menu-item index="/test">员工信息</el-menu-item>
          <el-menu-item index="1-2">其他</el-menu-item>
 </el-menu-item-group>

且需要在父组件的main区域增加

<router-view></router-view>标签
       <!-- 数据主体 -->
        <el-main>
            <router-view></router-view>
        </el-main>

 

3.8 前端路由守卫需要

我们在登录成功时,可以进行将用户信息存储在本地

             if(re.data.code==200){
                this.$message.success(re.data.msg)
                localStorage.setItem("user",this.ruleForm.user) //将用户信息存储到本地
                this.$router.push("/test")
              }

在main.js文件中配置路由守卫:

  //路由守卫
  router.beforeEach((to,from,next) => {
    if(to.path == "/" || localStorage.getItem("user")){   //获取的是登录成功时写的key
      next()            //如果满足条件,本地存储用户信息有值,则直接放行
    }else{
      next("/");        //如果本地没有用户的信息直接拦截到登录页
    }
  })

清除某一个本地存储key:

localStorage.removeItem("key");

清除所有本地存储key

localStorage.clear()

 

3.9 前端无缝刷新需要

APP.vue文件改变:

<template>
  <div>
  <!-- <Log-view></Log-view> -->
  <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>
<script>
// import LogView from './views/ElementLog.vue/LogView.vue'
export default {
  provide(){
    return{
      reload:this.reload
    }
  },data(){
    return{
      isRouterAlive:true
    }
  },methods:{
    reload(){
      this.isRouterAlive = false
      this.$nextTick(function(){
        this.isRouterAlive = true
      })
    }
  }
  // components:{LogView}
}
</script>
<style>

</style>
 
随后在所需要的项目页中添加依赖:
export default {
    inject:['reload'],//引入依赖
return{
}
}
添加依赖后直接使用:this.reload()  即可调用

 

 


以上便是vue-cli中的内容,如有漏缺请在下方留言告知,我会及时补充 

posted @ 2023-09-11 19:57  九极致之术  阅读(22)  评论(0编辑  收藏  举报