Серия VUE с нуля (начало работы), милый маленький белый, начните работу с VUE

внешний интерфейс Командная строка Vue.js Vuex

Глава 3 Начало работы

предисловие

Извините за задержку на этот раз, но я изо всех сил стараюсь найти время, чтобы продолжать писать, а мой уровень ограничен. Приветствую всех, кто меня поправит. В последней главе у вас должно быть понимание всей структуры проекта, поэтому приступим к написанию страниц.

Некоторые модификации vue-cli

Поскольку наши леса не совсем соответствовали потребностям проекта, мы собираемся добавить еще несколько вещей.

1. Установите vuex для управления состоянием

Что такое vuex, о нем я расскажу позже, короче, очень прост в использовании

 npm install --save vuex

2. Установите аксиомы

Функция заключается в использовании его для ajax запросов.Раньше был vue-resource, но в дальнейшем vue официально не поддерживается.Рекомендуется использовать axios.

 npm install --save axios

спецификация кода

Как квалифицированный фронтенд-инженер, наш код и нейминг должны быть стандартизированы, кхм, если честно, это не просто для того, чтобы хорошо выглядеть, но когда мы сотрудничаем со многими людьми для разработки, кто-то другой возьмет на себя ваш код, см. A имя компонента может с первого взгляда узнать, для чего оно используется, что и достигает нашей цели. Например, компонент приветствия в скаффолдинге:HelloWorld.vue, имя случая верблюда и название компонентов, стоящих за нами, берут это в качестве примера.

страница авторизации

Чтобы войти в систему фонового управления, вы должны сначала войти в систему, а затем приступить к разработке компонента страницы входа. Чтобы облегчить обслуживание, мы создаем новый каталог в папке pages под src (если такой папки нет, создайте ее самостоятельно..)userЗатем создайте новый в этом каталогеLogin.vueдокумент.

1. Настройте маршрутизацию

Перед конкретной реализацией нам нужно настроить маршрутизацию, чтобы мы могли получить доступ к этой странице. в файле маршрутизацииsrc/router/index.js, добавьте вновь созданный компонент.

import Login from '@/pages/user/Login' //引入组件

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/login', //路由路径
      name: 'Login',  //路由名称
      component: Login //引入的组件
    }
  ]
})

открыть в браузереhttp://localhost:8080/#/login, войдите на эту страницу.

2, практический

Откройте только что созданный файл Login.vue и начните программировать. Обратите внимание: каждый шаблон может содержать только один дочерний узел.

//正确写法
<template>
  <div>...</div>
</template>

//错误写法
<template>
  <div>...</div>
  <div>...</div>
</template>

Вставьте код напрямую, рекомендуется написать его самостоятельно, чтобы усилить впечатление.

<template>
    <div class="login_page">
        <section class="form_contianer">
            <div class="manage_tip">
                <p>第一个后台管理系统</p>
            </div>
             <el-form>
		<el-form-item prop="username">
			<el-input placeholder="用户名"><span>dsfsf</span></el-input>
		</el-form-item>
		<el-form-item prop="password">
			<el-input type="password" placeholder="密码" ></el-input>
		</el-form-item>
        	<el-form-item>
		    <el-button type="primary" class="submit_btn">登陆</el-button>
		</el-form-item>
	    </el-form>
        </section>
    </div>
</template>
<script>
export default {
  
}
</script>
<style scoped>
  @import '../../assets/css/login.css';
</style>

Ставим стиль css под ассеты отдельно, а потом внедряем в виде компонентов

//login.css
body,html{
    width: 100%;
    height: 100%;
    margin: 0;
}
.el-menu{
    border: none;
}
.login_page{
    background: #324057;
    width: 100%;
    height: 100%;
}
.form_contianer {
    width: 320px;
    height: 210px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -105px;
    margin-left: -180px;
    padding: 25px;
    border-radius: 5px;
    text-align: center;
    background-color: #fff;
}

Теперь стиль страницы в порядке, не правда ли, он очень простой, ха-ха.<el-form>Это тег компонента элемента, который уже помог нам реализовать базовый пользовательский интерфейс, и вам нужно просто настроить его. Подробную информацию можно найти на официальном сайте element ui. Осторожно, вы обнаружите, что на теге стиля естьscopedАтрибут, его роль заключается в ограничении области действия стиля, то есть все стили, которые вы пишете в этом компоненте, будут действовать только на ваш компонент и не будут влиять на другие компоненты. Заполненная страница выглядит следующим образом:

Вставьте предложение: Поскольку цвет фона полноэкранный, нам нужно установить высоту всех родительских элементов login_page на 100%, открытьsrc/App.vueи замените стиль следующим образом:

body,html {
  height: 100%;
  margin: 0;
  padding: 0;
}
#app {
  height: 100%;
}

Эпилог

В следующей главе мы продолжим дорабатывать страницу входа, включая интерфейс запроса и логику входа.Позже я разверну весь код на github, и вы сможете клонировать его напрямую.

все главы

Категории