前言

本次使用Vue+element-ui创建项目，当然前提是已经安装好vue和node.js。

准备工作

本次小弟使用的编辑器是VS Code(Visual Studio Code)。
电脑还要有网络哦。

实战

创建项目

打开你的cmd命令，切换到你要存放vue项目的文件夹。
小弟本次将项目存放在E盘的vue文件夹里。

输入vue init webpack-simple 项目名
记得空格，但是前后都没有空格。
然后一直回车就可以啦。

在这里插入图片描述

创建成功之后，切换到项目的目录下。
在这里插入图片描述

下载相关配置

这个运行完成的图当时没有截到，很抱歉！
在这里插入图片描述

下载、安装Element-ui

输入cnpm install element-ui -S然后回车，下载安装element-ui组件。
在这里插入图片描述下载、安装完成
然后进入编辑器编辑
在svg后面追加**|eot|woff|woff2|ttf**
效果
进入main.js
导入element-ui
源码：

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

安装路由

输入cnpm install vue-router -S回车安装路由
在这里插入图片描述

安装axios(ajax)

输入cnpm install axios -S回车
在这里插入图片描述
到编辑器新建router文件夹

在router文件下新建一个index.js文件
在这里插入图片描述

编写index.js代码
在这里插入图片描述源码

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

// import my from "../components/page/my"

import app from "../App.vue"

 
 let router= new Router ({
    routes: [
        {
            path: '/app',
            name:"app",
            component:app
        }
        // ,{
        //     path:'/my',
        //     name:'my',
        //     component:my
        //     // 添加标记，meta名不可乱写，requireAuth可以diy，但是拦截器里的标记名字要跟这个一直
        //     ,meta:{requireAuth:true}
        // }
    ]
});


/*
// 拦截器
// 进来之前拦截，to:想去哪里，from:从哪里来，next:实际下一步去哪里
// (to,from,next)=>   简写前   function(to,from,next)
router.beforeEach((to,from,next)=>{
    console.log("经过路由拦截器");

    // 判断你想去的位置，有没有一个叫做requireAuth的标记
    // function(res){ return res.meta.requireAuth }   简写后   res=>res.meta.requireAuth
    if(to.matched.some(function(res){ return res.meta.requireAuth })) {

        // 检查存储里面有没有登录信息，如果有就放它过去，反之，跳去login页面
        if (sessionStorage.getItem("user")){
            // 已登录，放他过去
            next()
        } else {
            alert("请登录！")
            // 没登录，导向login页面
            next({path:"/login"});
        }
    } else {
        // 放他过去
        next();
    }
})*/

export default router;

然后到main.js导入路由和引用路由

在这里插入图片描述

输入 npm run dev 然后回车，等待运行完成
在这里插入图片描述运行完成后，一般都会有浏览器自动启动页面。
一般默认端口是从8080开始，如果被占用就会8081依次下去。
还有如果你的vue项目占用着8080端口的时候，你还需要打开Tomcat的话就要先把vue项目停止。先运行Tomcat，因为Tomcat的默认端口一般都是8080，如果Tomcat发现端口被占用是直接报错的。
在这里插入图片描述如有不足，请多多指教。

C Q W

发布了26 篇原创文章 · 获赞 3 · 访问量 1431

私信关注

Vue+Element-ui创建项目并配置路由和axios

前言