Vue小模块之用户登录功能(一)工程创建和路由配置
Vue小模块之用户登录功能(一)搭建基础环境技术栈Vue全家桶:前端框架 Vue.js状态管理 Vuex动态路由匹配 vue-routerhttp服务 axios模块打包 webpackUI框架 element数据服务器服务器端 node.js基于node的web框架 express分布式数据库 mongodbmongodb工具mongoos...
Vue小模块之用户登录功能(一)搭建基础环境
技术栈
Vue全家桶:
前端框架 Vue.js
状态管理 Vuex
动态路由匹配 vue-router
http服务 axios
模块打包 webpack
UI框架 element
数据服务器
服务器端 node.js
基于node的web框架 express
分布式数据库 mongodb
mongodb工具 mongoose
生成项目
前往node.js官网下载安装node,安装完成后,打开cmd命令行,在任意路径输入node
命令,再输入
console.log('hello')
若输出hello
则表示node安装成功。
全局安装vue脚手架工具
$ npm i vue-cli -g
切换到工程目录,生成vue脚手架工程
$ vue init webpack login
接下来根据提示输入工程的信息
vue-router需要安装,新手可以选择不安装ESLint和所有测试工具,一下子学太多容易从入门到放弃
? Project name login
? Project description A Vue.js project
? Author your name
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm
脚手架工程安装完成后就可以用编译工具打开login
文件夹(我是用的VSCode),目录如下,编程都在src目录下进行
导入vue-router
先在目录src/components/
下创建两个空文件Main.vue
和Login.vue
工程会自动导入vue-router,若没有自动导入,则安装包:
$ npm i vue-router
在目录src/router/
下创建index.js
文件,代码如下
import Vue from 'vue'
import Router from 'vue-router'
import Main from '@/components/Main.vue'
import Login from '@/components/Login.vue'
Vue.use(Router) // 注册vue-router
export default new Router({
routes: [
{
path: '/',
name: 'Main',
component: Main
},
{
path: '/login',
name: 'Login',
component: Login
},
]
})
在main.js中引入前面的配置的路由
import Vue from 'vue'
import App from './App'
import router from './router' // 引入路由配置
Vue.config.productionTip = false
new Vue({
el: '#app',
router, // 等价于 router: router
components: { App },
template: '<App/>'
})
路由就设置成功了,接下来可以修改App.vue,Main.vue和Login.vue的代码如下(目前界面很难看,引入Element后再进行美化)
// App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style></style>
// Main.vue
<template>
<div>
<h1>主页面</h1>
欢迎!<b @click="login">点这里登录</b>
</div>
</template>
<script>
export default {
methods: {
login () {
this.$router.replace('/login')
}
}
}
</script>
// Login.vue
<template>
<div>
<h1>登录界面</h1>
用户名:<Input /><br/>
密码:<Input /><br/>
<button @click="login">登录</button>
</div>
</template>
<script>
export default {
methods: {
login () {
this.$router.replace('/')
}
}
}
</script>
路由模块运行
输入$ npm run dev
启动项目
可以看到如下页面
点击粗体字后可以切换到登录界面
点击登录后进入到主页面,如果能实现两个界面之间的切换,则路由模块成功实现
总结
本阶段实现了基础环境的搭建和路由的配置,下个阶段将使用Element框架对界面进行美化,并对表单添加基础的验证功能
更多推荐
所有评论(0)