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=https://registry.npm.taobao.org
```
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

Switch to the JavaWeb installation directory, for example: javavue: \ command line
Initialize vue program:
```
vue init webpack myvue
```
Vue build selects the first one, and the others choose No
Install all dependent environments:
```
npm install
```
Start project
```
npm run dev
```

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

Installation environment dependency:

npm install webpack -g
npm install webpack-cli -g

Create Vue project
Create a directory named modules
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>");
}
```
Under modules, create a file named main JS, which is used to set the entry attribute when packaging
```
var hello = require("./hello");
hello.sayHi();
```

Create webpack.com in the project directory config. JS configuration file, packaged with webpack command

module.exports = {
    entry:'./modules/main.js',
    output:{
        filename:"./js/bundle.js"
    }
};

Create an HTML page under the project directory, such as index HTML, import the JS file packaged by Webpack
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="dist/js/bundle.js"></script>

</body>
</html>
```
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

Install Vue router in the project (not global)
```
npm install vue-router --save-dev
```

Using Vue Use in router / index Install routing in JS

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

test
- Delete the useless things first
- The components directory stores the components written by ourselves
- Define a named content Components of Vue
```
<template>
  <h1>Content page</h1>
</template>

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

<style scoped>

</style>
```

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
Vue.use(VueRouter)

//Configure export routes
export default new VueRouter({
  routes:[
    {
      //Routing path
      path:'/content',
      name:'content',
      //Jump components
      component:Content
    },
    {
      //Routing path
      path:'/main',
      name:'content',
      //Jump components
      component:Main
    },
    {
      //Routing path
      path:'/xing',
      name:'content',
      //Jump components
      component:Xing
    }
  ]
});

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
  router,
  components: { App },
  template: '<App/>'
})

On app Using routing in Vue

<template>
  <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>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App'
}
</script>

<style>
#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;
}
</style>

ElementUI & Layui

Create vue project
```
vue init webpack hello-vue
```

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

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

Programmer Think