admin管理员组文章数量:1632659
一、准备工作
1.安装git-bash
安装命令行工具Git一路next即可(建议不要放C盘)2.安装nodeJS环境
NodeJS安装,注意版本,一路next即可(建议不要放C盘) 检验是否安装成功:单击右键--->打开git-bash--->出现小黑窗--->输入 node -v3.git-bash切换成淘宝镜像
单击右键--->打开git-bash--->出现小黑窗
切换淘宝镜像: npm config set registry https://registry.npm.taobao/ 查看镜像源: npm config get registry二、初始化项目
1.创建date0425文件夹(路径随意,不过要记住)
2.项目初始化
打开Git bash(进入到date0506文件夹中, 单击右键--->打开git-bash--->出现小黑窗(小黑窗不要关闭,后面还需要在小黑窗中输入命令)) 输入 npm init -y 会生成一个package.json的工程文件,该文件不允许出现注释文本三、安装vue框架和路由
在小黑窗中输入: npm install vue@2.6.14 npm i vue-router@3.1.x四、安装webpack及其相关的开发工具
1.在小黑窗中输入:
npm i webpack@4.39.x -D npm i webpack-cli@3.3.x -Dnpm i webpack-dev-server@3.8.x -D
npm i html-webpack-plugin@3.2.x -D2.在根目录下,创建webpack.config.js文件
打开VSCode---->文件---->打开文件夹--->找到date0506
3.向webpack.config.js文件添加内容
const htmlWebpackPlugin = require('html-webpack-plugin')
const vueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
entry:'./main.js',
output:{
path:__dirname,
filename:'app.js',
},
resolve:{
alias:{
'vue':'vue/dist/vue.js'
}
},
module:{
rules:[
{
test:/\.vue$/,
use:'vue-loader'
},
{
test:/\.css$/,
use:['style-loader','css-loader']
},
// {
// test:/\.scss$/,
// use:['style-loader','css-loader',sass-loader]
// },
{
test:/\.(jpg|png|jpeg|bmp|gif)$/,
use:'url-loader'
},
{
test:/\.(eot|ttf|woff|woff2|svg|otf|ttc)$/,
use:'file-loader'
},
]
},
plugins:[
new htmlWebpackPlugin({
template:'index.html'
}),
new vueLoaderPlugin()
]
}
4.在date0504目录中,创建main.js和index.htm
① index.html中的内容为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
②main.js的内容为
// 引入MUI框架
import './lib/mui/css/mui.css'
// 引入vue框架
import Vue from 'vue'
// 引入路由
import VueRouter from 'vue-router'
// 安装路由
Vue.use(VueRouter)
// 引入主组件
import app from './App.vue'
// 引入路由的配置
import router from './router.js'
new Vue({
el:'#app',
render:(c) =>c(app),
// 渲染页面的主主键
router
})
五、安装vue文件的加载器
1.在小黑窗中输入:
npm i vue-loader@15.7.x vue-template-compiler@2.6.x -D六、安装加载css文件css-loader,style-loader
1.在小黑窗中输入:
npm i css-loader@3.2.x --save-dev npm i style-loader@1.0.x --save-dev七、安装sass
1.在小黑窗中输入:
npm install sass-loader@7.2.x -D npm i node-sass --sass_binary_site=https://npm.taobao/mirrors/node-sass/ -D八、引入UI框架
1.在date0506目录下创建文件夹lib,将mui放进去
九、安装loader加载图片和其他字体文件
1.在小黑窗中输入:
npm i url-loader@2.1.x -D
npm i file-loader@4.2.x -D
十、创建页面
(HTML入口:挂载点,逻辑入口:引入项目的依赖,主组件:加载和显示其他组件)
1,首页index.html(前面已经创建了并且添加了内容)
2,在main.js中引入项目所需要的文件和框架(前面已经创建了并且添加了内容)
3.创建主组件:App.vue
4.创建路由配置文件:router.js
5.App.vue中的内容为
<template>
<div>
<div class="btns">
<router-link to="/login" tag="button">登录</router-link>
<router-link to="/register" tag="button">注册</router-link>
</div>
<router-view></router-view>
</div>
</template>
<style>
.btns{
display:flex;
}
.btns button{
width:50%;
}
.router-link-exact-active,.router-like-active{
background:#007AFF;
color:white;
}
</style>
<script>
</script>
6.router.js中的内容为
//引入路由
import VueRouter from "vue-router"
//引入登录和注册组件
import Login from "./components/Login.vue"
import Register from "./components/Register.vue"
//暴露路由模块
export default new VueRouter({
routes:[
{
path:'/',
redirect:'/login' //路由重定向
},
{
path:"/login",
component:Login
},
{
path:"/register",
component:Register
}
]
})
7.在date0506目录下创建components目录,然后在components目录下分别创建Login.vue和Register.vue
8.Login.vue的内容为
<template>
<div>
<form class="mui-input-group">
<div class="mui-input-row">
<label>用户名</label>
<input type="text" class="mui-input-clear" placeholder="请输入用户名">
</div>
<div class="mui-input-row">
<label>密码</label>
<input type="password" class="mui-input-password" placeholder="请输入密码">
</div>
<div class="mui-button-row">
<button type="button" class="mui-btn mui-btn-primary" >确认</button>
</div>
</form>
</div>
</template>
<style scoped>
</style>
<script>
</script>
9.Register.vue的内容为
<template>
<div>
<form class="mui-input-group">
<div class="mui-input-row">
<label>用户名</label>
<input type="text" class="mui-input-clear" placeholder="请输入用户名">
</div>
<div class="mui-input-row">
<label>性别</label>
<input type="radio" name="sex">女
<input type="radio" name="sex">男
</div>
<div class="mui-input-row">
<label>密码</label>
<input type="password" class="mui-input-password" placeholder="请输入密码">
</div>
<div class="mui-button-row">
<button type="button" class="mui-btn mui-btn-primary" >确认</button>
</div>
</form>
</div>
</template>
<style scoped>
</style>
<script>
</script>
十一、运行项目
1.检查并配置package.json:
添加:"dev": "webpack-dev-server --inline --hot --port 8088"
2.打开小黑窗,执行 npm run dev
3.打开浏览器访问:http://localhost:8088/
版权声明:本文标题:用户登录注册案例(Vue路由) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1729142033a1187677.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论