Preface
Always wanted to learn about the system Vue
to the, fight the epidemic at home these days, just to enrich my knowledge. Record about the development of a process-based system login screen.
Preparing the Environment
Install Node.js (npm)
Official website to download and install the LTS version:
https://nodejs.org/en/download/
Modify npm use Taobao mirror source
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
installationyarn
More than npm
more than easy to use, fast and that more than one Diudiu!
npm install yarn -g
Configuration yarn
also use Taobao Mirror:
yarn config set registry https://registry.npm.taobao.org
Install Vue CLI
scaffolding tool
yarn global add @vue/cli
vue --version
# @vue/cli 4.2.2
After installation is complete, if not directly invoke the command line
vue
command, the system will need to manuallyPATH
add the following environment variable path:
% USERPROFILE% \ AppData \ Local \ the Yarn \ bin
Creating Vue project
vue create frontend # frontend为项目文件夹名称
Manually select Manually wizard to create a project, pay attention to the function selectionBabel
Router
Linter
Vue CLI v4.2.2
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies: Yarn
Start the development server
cd frontend
yarn serve
Accessed using a browser http://localhost:8080
to see the default page Vue
[Optional] use visual interface Vue project management
vue ui
Vue project can be managed in the browser
Installation Element UI
Document official website:
https://element.eleme.cn/#/zh-CN/component/installation
Creating good in the above frontend
folder location (with the package.json
file the same level) execute the following command:
yarn add element-ui
Installation other dependencies (package)
yarn add axios less less-loader
Line and Code
File Structure:
G:\Python_projects\vue_study\frontend\src>tree /f
卷 WORK 的文件夹 PATH 列表
卷序列号为 102C-0B5A
G:.
│ App.vue SPA(Single Page Application)单页面主入口Vue对象
│ main.js 主js入口,用来引用路由,Element UI模块,全局css样式文件,初始化Vue对象定义
│
├─assets 静态资源目录
│ global.css 全局样式表
│ logo.png 头像图片
│
├─router
│ index.js 路由定义
│
└─views
Login.vue 登录页面
App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<style>
</style>
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 引入ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' // 注意需要单独引入css文件
// 引入全局样式表
import './assets/global.css'
Vue.config.productionTip = false
Vue.use(ElementUI)
new Vue({
router,
render: h => h(App)
}).$mount('#app')
views/Login.vue
<template>
<div class="login_box">
<!--头像-->
<div class="avatar">
<img src="@/assets/logo.png">
</div>
<!--表单-->
<el-form ref="loginFormRef" :model="form">
<el-form-item>
<el-input v-model="form.username" prefix-icon="el-icon-user" placeholder="请输入用户名"/>
</el-form-item>
<el-form-item>
<el-input v-model="form.password" prefix-icon="el-icon-lock" placeholder="请输入密码" type="password"/>
</el-form-item>
<el-form-item>
<el-row class="login_btns" :gutter="10">
<el-col :span="6">
<el-button type="primary">登录</el-button>
</el-col>
<el-col :span="6">
<el-button type="default">取消</el-button>
</el-col>
</el-row>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'Login',
data: function () {
return {
form: {
username: '',
password: '',
},
}
},
}
</script>
<style lang="less" scoped>
.login_box {
width: 400px;
height: 200px;
padding-left: 50px;
padding-right: 50px;
padding-top: 100px;
background-color: #FFFFFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.avatar {
width: 150px;
height: 150px;
border-radius: 50%;
border: 2px solid #ccc;
background-color: #FFFFFF;
padding: 10px;
box-shadow: 0 0 10px #ccc;
position: absolute;
left: 50%;
transform: translate(-50%, -220px);
img {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.login_btns {
display: flex;
justify-content: center;
button {
width: 100%;
}
}
</style>
router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/Login'
Vue.use(VueRouter)
const routes = [
{ path: '/', redirect: '/login' },
{ path: '/login', component: Login }
]
const router = new VueRouter({
routes
})
export default router
assets/global.css
body{
height: 100%;
padding: 0;
margin: 0;
background-color: #41b883;
}