Partage d'exemples de construction d'environnement pour vue.js, element-ui et vuex

Cet article partage principalement avec vous des exemples de construction d'environnements vue.js, element-ui et vuex. Cet article partage principalement des exemples graphiques et du code, dans l'espoir d'aider tout le monde.

1. Initialiser le projet

vue init webpack <project-name>

2. Initialiser les packages de dépendances

npm install

3. >

npm run dev

Entrez localhost:8080 dans la barre d'adresse

4. Importer le package elementUI

npm install --save vue element-ui

5. Importer vue-router package

npm install --save vue-router

6. Importer le package axios

npminstall --save axios

7. Installer sass-loader et le plug-in node-sass

npm install sass-loader -Dnpm install node-sass -D

---

Projet répertoire

8. Modifier et déboguer

Introduire l'élément vue et le routeur dans main.js :

import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css';import VueRouter from 'vue-router'Vue.use(ElementUI)
Vue.use(VueRouter)

Nouveau fichier vue de connexion : Ulogin.vue

<template>
  <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px"
           class="demo-ruleForm login-container">
    <h3 class="title">系统登录</h3>
    <el-form-item prop="account">
      <el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="账号"></el-input>
    </el-form-item>
    <el-form-item prop="checkPass">
      <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密码"></el-input>
    </el-form-item>
    <el-form-item style="width:100%;">
      <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" >登录      </el-button>
    </el-form-item>
  </el-form></template><script>
  export default {
    name: "Ulogin.vue",
    data() {      var checkAccount = (rule, value, callback) => {        if (!value) {          return callback(new Error(&#39;请输入账号&#39;));
        } else if (value.length < 4 || value.length>12) {          return callback(new Error(&#39;账号名必须在4~12位&#39;));
        } else {
          callback();
        }
      };      var checkPass = (rule, value, callback) => {        if (value === &#39;&#39;) {          return callback(new Error(&#39;请输入密码&#39;));
        } else if (value.length < 2) {          return callback(new Error(&#39;密码不能小于两位&#39;));
        } else {          return callback();
        }
      };      return {
        ruleForm2: {
          account: &#39;&#39;,
          checkPass: &#39;&#39;
        },
        rules2: {
          account: [
            {validator: checkAccount, trigger: &#39;blur&#39;},
          ],
          checkPass: [
            {validator: checkPass, trigger: &#39;blur&#39;},
          ]
        }
      };
    },
    methods: {
      handleSubmit2(ruleForm2) {        this.$refs.ruleForm2.validate((valid) => {          if (valid) {
            alert(&#39;提交！&#39;)
          } else {
            alert(&#39;登陆失败！&#39;);
            console.log(&#39;error submit!!&#39;);            return false;
          }
        });
      }
    }
  }</script><style lang="scss" scoped>
  .login-container {    /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
    -webkit-border-radius: 5px;    border-radius: 5px;    -moz-border-radius: 5px;    background-clip: padding-box;    margin: 180px auto;    width: 350px;    padding: 35px 35px 15px 35px;    background: #fff;    border: 1px solid #eaeaea;    box-shadow: 0 0 25px #cac6c6;    .title {
      margin: 0px auto 40px auto;      text-align: center;      color: #505458;    }
    .remember {      margin: 0px 0px 35px 0px;    }
  }</style>

routage de configuration du fichier index.js du routeur :

import Ulogin from '../components/Ulogin'Vue.use(Router)

export default new Router({
  routes: [    // {
    //   path: '/',
    //   name: 'HelloWorld',
    //   component: HelloWorld
    // },
    {
      path:'/',
      name:'',
      component:Ulogin
    }
  ]
})

App.vue

<template>
  <p>
    <router-view></router-view>
  </p></template><script>
  export default {
    name: &#39;App&#39;
  }</script><style>
  #app {    font-family: &#39;Avenir&#39;, Helvetica, Arial, sans-serif;    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;    text-align: center;    color: #2c3e50;    margin-top: 60px;  }</style>

Structure du répertoire :

Exécuter : npm run dev

Recommandations associées :

Explication détaillée des didacticiels sur la configuration des environnements vue, node et webpack

Explication détaillée des didacticiels simples sur la configuration de l'environnement vue avec des exemples

Les 6 meilleurs PHP en 2017 Outils de création d'environnement recommandés

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!