Heim  >  Artikel  >  Web-Frontend  >  Teilen von Beispielen für den Umgebungsaufbau für vue.js, element-ui und vuex

Teilen von Beispielen für den Umgebungsaufbau für vue.js, element-ui und vuex

小云云
小云云Original
2018-03-07 13:19:354064Durchsuche

In diesem Artikel werden hauptsächlich Beispiele für den Aufbau von vue.js, element-ui und vuex-Umgebungen vorgestellt. In diesem Artikel werden hauptsächlich grafische Beispiele und Code vorgestellt, in der Hoffnung, allen zu helfen.

1. Initialisieren Sie das Projekt

vue init webpack <project-name>

Teilen von Beispielen für den Umgebungsaufbau für vue.js, element-ui und vuex

2. Initialisieren Sie Abhängigkeitspakete

npm install

3 >

npm run dev
Geben Sie „localhost:8080“ in die Adressleiste ein

Teilen von Beispielen für den Umgebungsaufbau für vue.js, element-ui und vuex

4. ElementUI-Paket importieren

npm install --save vue element-ui
5. Vue-Router importieren Paket

npm install --save vue-router
6. Axios-Paket importieren

npminstall --save axios
7. Sass-Loader und Node-Sass-Plugin installieren

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

Projekt Verzeichnis


Teilen von Beispielen für den Umgebungsaufbau für vue.js, element-ui und vuex

8. Ändern und debuggen

Vue-Element und Router in main.js einführen:

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

Teilen von Beispielen für den Umgebungsaufbau für vue.js, element-ui und vuex

Neue Login-Vue-Datei: 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>
Router-Index.js-Dateikonfigurationsrouting:

import Ulogin from &#39;../components/Ulogin&#39;Vue.use(Router)

export default new Router({
  routes: [    // {
    //   path: &#39;/&#39;,
    //   name: &#39;HelloWorld&#39;,
    //   component: HelloWorld
    // },
    {
      path:&#39;/&#39;,
      name:&#39;&#39;,
      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>
Verzeichnisstruktur :

Teilen von Beispielen für den Umgebungsaufbau für vue.js, element-ui und vuex

Run: npm run dev


Teilen von Beispielen für den Umgebungsaufbau für vue.js, element-ui und vuex
Teilen von Beispielen für den Umgebungsaufbau für vue.js, element-ui und vuex
Teilen von Beispielen für den Umgebungsaufbau für vue.js, element-ui und vuex

Verwandte Empfehlungen:

Detaillierte Erläuterung der Tutorials zum Einrichten von Vue-, Node- und Webpack-Umgebungen

Detaillierte Erläuterung einfacher Tutorials zum Einrichten der Vue-Umgebung mit Beispielen

Die 6 besten PHP im Jahr 2017 Empfohlene Tools zum Erstellen von Umgebungen

Das obige ist der detaillierte Inhalt vonTeilen von Beispielen für den Umgebungsaufbau für vue.js, element-ui und vuex. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn