Vue learning notes: Vue development

Posted by rthconsultants on Mon, 07 Mar 2022 21:09:23 +0100

Configure environment dependencies

  • Nodejs 14.15.4

  • npm 6.14.10

  • Install Taobao accelerator:

    # -g is a global installation
    npm install cnpm -g
    npm install --registry=

    The default location for global installation of Node module under windows is C:\Users\xxx\AppData\Roaming\npm\node_modules

  • Install Vue cli

    cnpm install vue-cli -g
    # Test whether the installation is successful
    vue list

First Vue program

  1. Switch to the JavaWeb installation directory, for example: javavue: \ command line

  2. Initialize vue program:

    vue init webpack myvue

    Vue build selects the first one, and the others choose No

  3. Install all dependent environments:

    npm install
  4. Start project

    npm run dev
  5. Start successful

    DONE  Compiled successfully in 15265ms                                                                   
    I  Your application is running here: http://localhost:8080

    visit http://localhost:8080 It can be found in config \ index Modify the port number in JS

Packaging projects using webpack

  1. Installation environment dependency:

    npm install webpack -g
    npm install webpack-cli -g
  2. Create Vue project

  3. Create a directory named modules

  4. Create a module file under modules, such as hello JS, which is used to write relevant code of JS module

    /*Expose a method*/
    exports.sayHi = function(){
        document.write("<h1>Madness theory ES6</h1>");
  5. Under modules, create a file named main JS, which is used to set the entry attribute when packaging

    var hello = require("./hello");
  6. Create in the project directory config. JS configuration file, packaged with webpack command

    module.exports = {
  7. Create an HTML page under the project directory, such as index HTML, import the JS file packaged by Webpack

    <!DOCTYPE html>
    <html lang="en">
        <meta charset="UTF-8">
    <script src="dist/js/bundle.js"></script>

    Note: if you fail to execute webpack directly on the IDEA console, you can use administrator privileges!

Vue router routing

Vue Router is Vue JS official routing manager. The functions include:

  • Nested routing / view tables
  • Modular, component-based routing configuration
  • Routing parameter, query, wildcard
  • Based on Vue View transition effect of JS transition system
  • wait
  1. Install Vue router in the project (not global)

    npm install vue-router --save-dev
  2. Using Vue Use in router / index Install routing in JS

    import Vue from 'vue'
    import VueRouter from 'vue-router'
  3. test

    • Delete the useless things first

    • The components directory stores the components written by ourselves

    • Define a named content Components of Vue

        <h1>Content page</h1>
        export default {
          name: "Content"
      <style scoped>
  4. Install the route. Under the src directory, create a new folder: router to store the route

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Content from '../components/Content'
    import Main from '../components/Main'
    import Xing from "../components/Xing";
    //Install routing
    //Configure export routes
    export default new VueRouter({
          //Routing path
          //Jump components
          //Routing path
          //Jump components
          //Routing path
          //Jump components
  5. In main Configure routing in 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'
    //Auto scan the configuration inside
    import router from './router'
    Vue.config.productionTip = false
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      //Configure routing
      components: { App },
      template: '<App/>'
  6. On app Using routing in Vue

      <div id="app">
        <router-link to="/main">home page</router-link>
        <router-link to="/content">Content page</router-link>
        <router-link to="/Xing">Xing</router-link>
    export default {
      name: 'App'
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;

ElementUI & Layui

  1. Create vue project

    vue init webpack hello-vue
  2. To install dependency, you need to install Vue router, element UI, sass loader and node sass plug-ins

    cd hello-vue
    npm install vue-router --save-dev
    npm install element-ui -S
    npm install
    cnpm install sass-loader node-sass --save-dev
    npm run dev
  3. Find the appropriate template on the ElementUI or Layui page, directly copy it to the corresponding module of components, and modify it as required.

    ElementUI : hungry? A set of front-end products based on vue2 0 desktop component library provides supporting front-end design resources to help your website take shape quickly.

    Layui : a set of classic open source modular front-end UI framework.

Topics: Java