Introduction to the Vue

This is the 16th day of my participation in the August More Text Challenge. For details, see:August is more challenging

Installation node. Js Just install it for a fool

Open the cli after installationCome out version number is OKCreate my first vUE projectOpen the location you want to createHow do I run the run command in idea

Evolution of modularityThe script tag is the original way to load JavaScript files. If each file is treated as a module, then their interface is usually exposed to the global scope, that is, defined in the Window object. Different modules are called to the same scope. This primitive method of loading exposes some obvious drawbacks: The CommonsJS specification allows modules to be loaded synchronously with other modules required by require. The CommonsJS specification allows modules to be loaded synchronously with other modules required by require. The exposed interface is then exported through exports or module.exports. Advantages: ● Server side modules are easy to reuse ●NPM already has over 450,000 available module packages ● Easy to use Disadvantages: ● Synchronous module loading is not suitable in a browser environment, synchronization means blocking loading, browser resources are loaded asynchronously ● No non-blocking parallel loading of multiple modules implementation: ● Modules-webmake, which is similar to Browserify, But not as flexible as Browserify. ● WreQ, Browserify’s predecessorAdmAsynchronous Module Definition define(ID? , dependencies? , factory); It specifies all dependencies when declaring the module, and passes them to factory as a parameter. Advantages: Suitable for asynchronous loading of modules in a browser environment. Disadvantages: The ability to load multiple modules in parallel. Increased development costs, difficult code to read and write, and poor semantics in the way modules are defined.CMDThe Commons Moule Definition specification is very similar to AMD, keeping it as simple as possible, and maintaining great compatibility with CommonsJS and NodeJS ‘Modules specifications. Advantages: ● Rely on nearby, delayed execution ● Can easily run in NodeJS Disadvantages ● rely on SPM packaging, module loading logic is heavy implementation ● sea-.jsES6 moduleThe EcmaScript6 standard adds the JavaScript language-level module architecture definition. The ES6 module is designed to be as static as possible, so that the dependencies of the module and the variables in and out of the module can be determined at compile time. CommonsJS and AMD modules, both of which can only be determined at run time. Advantages: easy static analysis; disadvantages of the fut-oriented EcmaScript standard; non-implementation of the standard in native browsers; new commands; new NodeJS implementations of BabelInstall WebpackCommand NPM install webpack -g NPM install webpack -gconfigurationCreate webpack,config.js configuration file, specify webPack to use as the project’s entry file output, specify webPak to place the completed file in the specified path module, Resolve sets the path to the Watch listener, which is used to set the file to be packaged directly after changes are madeWrite a packaged test demoCreate a new folder and open it with idea

The effectVue router routingBefore installation, check whether the Vue-router plug-in package is available. No command is entered to download the package. NPM install vue-router –sava-dev If it is used in a modular project, routing must be explicitly installed via vue.use ()

import Vue  from 'vue'
import VueRouter from 'vue-router'
import Cotent from ".. /components/Cotent"
// Install the route
Vue.use(VueRouter)
Copy the code

First routing demoThe directory structureContent page

<template>
    <p style="color: aquamarine">I'm the content page</p>
</template>

<script>
    export default {
        name: "content"
    }
</script>

<style scoped>

</style>

Copy the code

import Vue  from 'vue'
import VueRouter from 'vue-router'
import Cotent from ".. /components/Cotent"
// Install the route
Vue.use(VueRouter)
// Configure the export route
export default new VueRouter({
  routes: [{/ / routing path
      path: '/content'.component: Cotent
    }
  ]




})

Copy the code

We’re going to put our own routes in app.vueThe effectClick on it and I’ll come out.Vue+elementCreate a new project: NPM install vue-router –save-dev 2. Install element-ui NPM I element-ui -s 3, install dependency NPM install 4, install Sass loader NPM install Sass = Loader node-sass –save-dev 5, and start the testDescription of the Npm commandNPM install moduleName: install the module in the project directory NPM install -g modeleName: -g means install to global NPM install-save modeleaName –save means install the module to the project directoryMy first Element demo page-logged

<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">Welcome to login</h3>
      <el-form-item label="Account" prop="username">
        <el-input type="text" placeholder="Please enter your account number" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="Password" prop="password">
        <el-input type="password" placeholder="Please enter your password" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('loginForm')">The login</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="Warm tips"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>Please enter your account number and password</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">determine</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export  default {
    name:"Login".data(){
      return {
        form: {username: ' '.password: ' '
        },
        // Add a prop attribute to the el-form-item element for form validation
        rules: {username:[
            {required:true.message:'Account cannot be empty'.trigger:'blur'}].password:[
      {required: true.message: 'Password cannot be empty'.trigger:'blur'}},// Show and hide the dialog box
      dialogVisible:false}},methods: {onSubmit(formName) {
        // Bind validation to the form
        this.$refs[formName].validate((valid) = >{
          if (valid){
            // Use vue-router to route to the specified page. This is called programmatic navigation
            this.$router.push("/main");
          } else {
            this.dialogVisible = true;
            return false; }}); }}}</script>
<style lang="scss" scoped>
  .login-box{
    border: 1px solid #DCDFE6;
    width: 350px;
    margin:180px auto;
    padding:35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow:0 0 25px # 909399;
  }

  .login-title{
    text-align:center;
    margin:0 auto 40px auto;
    color:# 303133;
  }
</style>

Copy the code

The home page is written in one sentence to set the route

import Vue from 'vue' import Router from 'vue-router' import Main from '.. /views/Main' import Login from '.. /views/Login'; Vue.use(Router) export default new Router({ routes:[ { path: '/main', component :Main } ,{ path: '/login', component :Login } ] })Copy the code

Main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(router);
Vue.use(ElementUI)
new Vue({
  el: '#app',
  components: { App },
  router,
  template: '<App/>',
  render: h => h(App)
})

Copy the code

Finally in the APP. VUEThe effectIf the startup error, you can modify Nested routingNested routes are also called child routes. In practical applications, they are usually composed of multiple layers of components. Similarly, each segment path in a Url corresponds to each layer of components nested in a certain structure.

1. Modify the home page

<template>
  <div>
<el-container>
  <el-aside width="200px">
    <el-menu :default-openeds="[' 1 ']">
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-caret-right"></i>User management</template>
        <el-menu-item-group>
          <el-menu-item index="1-1">
            <router-link to="/user/profile">Personal information</router-link>
          </el-menu-item>
          <el-menu-item index="1-2">
            <router-link to="/user/list">List of users</router-link>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title"><i class="el-icon-caret-right"></i>Content management</template>
        <e1-menu-item-group>
          <el-menu-item index="2-1">Classification management</el-menu-item>
          <el-menu-item index="2-2">The content list</el-menu-item>
        </e1-menu-item-group>
      </el-submenu>
    </el-menu>
  </el-aside>
  <el-container>
    <el-header style="text-align: right; font-size: 12px">
      <el-dropdown>
        <i class="el-icon-setting" style="margin-right:15px"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>Personal information</el-dropdown-item>
          <el-dropdown-item>Log out</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>

    <el-main>
      <router-view/>
    </el-main>

  </el-container>
</el-container>
</div>
</template>

<script>
  export default {
    name: "Main"
  }
</script>

<style scoped lang="scss">
  .el-header {
    background-color: #048bd1;
    color: # 333;
    line-height: 60px;
  }

  .el-aside {
    color: # 333;
  }
</style>

Copy the code

2, write two componentsSo let me just write that downModify the routing The effectPass parameters and redirectionPass parameters home pageRouting page