Front-end engineering (vue2)

1. Environmental preparation

1. Dependency environment: NodeJS

Government:Node.js

2. Scaffolding: Vue-cli

Reference location:Anso | Vue CLI

Introduction: Vue-cli is used to quickly generate a Vue project template. The main functions are: unified directory structure, local debugging, hot deployment, unit testing, and integrated packaging.

//Install scaffolding globally
npm install -g @vue/cli
//Judge whether the scaffolding is successfully installed by checking the vue version
vue --version

​​​​​​

2. Create a vue project

1. Create vue from the command line

Reference URL:Create a project | Vue CLI

Command line operations:

Building vue item:
vue create project-name(vue item name self-determined) 
eg:
-Manually select features
-Babel Router
-2.x
-yes,In package.json,yes,babel-router

Graphical interface operation

Embroidery interface construction vue item:
1.vue ui

Then enter the command directly in the current directoryvue ui to enter the graphical interface of vue, as shown in the following figure:

Then we select the create button and create the project under the vue folder, as shown in the figure below:

Then come to the following interface to create the vue project:

Then select manual preset template, as shown in the figure below:

​​​​​​​

Then enable the routing function on the function page, as shown in the figure below:

Then select the language version and grammar check specification on the configuration page, as shown in the figure below:

Then create a project and enter the following interface:

Finally, we only need to wait for a moment to enter the successfully created interface, as shown in the figure below:

At this point, the vue project creation is completed.

​​​​​​​

2. Introduction to vue project directory

3. Run the vue project

(1) Method 1: Command line method

Directly based on the cmd command window, in the vue directory, execute the input commandnpm run serve, as shown in the following figure:

(2) Method 2: vscode graphical interface

1. Debugging the NPM script window

Step 1: Change the NPM default configuration throughSettings/User Settings/Extensions/MPM, as shown in the figure below

Then restart VS Code, anddouble-click to open the package.json file, and then click Explorer 3 small dots, check the npm script option, as shown in the figure

2. Click serve in the NPM script to run the vue project

3.Supplement

Port 8080 is often occupied, so we can modify the default port 8080. We modify the contents of the vue.config.js file and add the following code:

devServer:{
    port:7000
}

As shown in the picture below, we then shut down the server and restarted it. The port was changed successfully. We can access our previous project through the browser through port 7000.

3. Vue project development process

index.html

1. The home page accessed by our browser is index.html, which is in public/index.html; the vue project makes the index.html content displayed by the browser very rich.

main.js

2. For Vue projects, index.html introduces the entry function main.js by default, which is in src/main.js.

//main.js code
import Vue from 'vue'
import App from './App.vue' //Import App.vue in the current directory and name it App
import router from './router'
​
Vue.config.productionTip = false
​
new Vue({
  router, //equivalent to router: router
  render: h => h(App)
}).$mount('#app')
​
Key points of the code:
import: Import the specified file and rename it. 
new Vue(): Create vue object
$mount('#app'); Hangs the dom object created by the vue object in the label area with id=app. The function is the same as the le attribute of the vue object learned before. (In main.js, it is hung in the tag area of ​​id=app in index.html through code)
router:routing
render: mainly uses the rendering of the view (render the App object, which is the App.vue component, the root component)

app.vue

3.App.vue (root component, content seen on the entire page)

vue component: Everything ending in .vue is vue component

Vue’s component file contains 3 parts:
- template: Template part, mainly HTML code, used to display the main structure of the page
- script: js code area, mainly used to control the data source and behavior of the template through js code
- style: css style part, mainly controls the page effect of the template through css style

4. Vue component library Element: beautiful page

Element: It is a set of Vue-based website component libraries provided by Ele.me’s front-end development team for quickly building web pages. There are many components (the parts that make up a web page) provided for us to use. For example, hyperlinks, buttons, pictures, tables, etc.

ElementUI is a front-end framework that focuses on V development and is mainly used to develop beautiful pages.

参考网址：Element - The world's most popular Vue UI framework

1.Install ElementUI

npm i element-ui -S

2. Introduce the ElementUI component library into the entry js of main.js

//Added below in main.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
​
Vue.use(ElementUI);

3. Create component files and create vue component files with .vue suffix.

//Create a vue component file in the src/views directory. Note that the component name suffix is ​​.vue
//Basic component code, vue component includes 3 parts: template, script, style
<template>
​
</template>
​
<script>
export default {
​
}
</script>
​
<style>
​
</style>

4. Use the Vue component library Element code to the component file

Go to the official website of ElementUI, find the component libraryElement - The world's most popular Vue UI framework, and add the components you need Copy the component code and use it in the template module in the component file

5. Use custom components in App.vue

Introduce our custom component into the default accessed root componentsrc/App.vue. The specific steps are as follows:

Then the specific code in the App.vue component is as follows, The code is automatically generated when we introduce the element-view component through the above steps.

<template>
  <div id="app">
    <!-- {
  
  {message}} -->
    <element-view></element-view>
  </div>
</template>
​
<script>
import ElementView from './views/Element/ElementView.vue'
export default {
  components: { ElementView },
  data(){
    return {
      "message":"hello world"
    }
  }
}
</script>
<style>
​
</style>

5. Routing: Implement page switching

Front-end routing: the correspondence between the hash in the URL (the content after the # sign) and the component. (When the navigation bar is clicked, the browser's address bar will change, and the route will automatically update to display the vue component corresponding to the url.)

Officially provided by VueRouting plug-in: Vue RouterComposition:

• VueRouter: Router class that dynamically renders the selected component in the routing view based on routing requests.

• <router-link>: Requests a connection component, and the browser will parse it into an <a> tag.

• <router-view>: Dynamic view component, used to render and display components corresponding to the routing path.

working principle:

1. Install the vue-router plug-in:

npm install vue-router
(Tip: When installing scaffolding, you have already checked the routing function and do not need to install it again)

2. Define the routing table (in the src/router/index.js file)

//Modify according to the template code provided
//Note that you need to remove the import module that is not referenced. 
import Vue 'vue'
import VueRouter 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/emp', //Address hash
    name: 'emp',
    component: () => import('../views/tlias/EmpView.vue') //Corresponding vue component
  },
  {
    path: '/dept',
    name: 'dept',
    component: () => import('../views/tlias/DeptView.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

The router function has been introduced in the main.js entry:

//main.js文件
import router from './router'

The basic routing information has been configured here, and the routing table has been loaded. At this time, we are still missing two things, namely <router-link> and <router-view>

3. Define <router-link> in the custom component

//<router-link> component, the user clicks to issue a routing request; according to the routing request, the corresponding vue component is found in the routing table;
eg:
<el-menu-item index="1-1">
    <router-link to="/dept">Department Management</router-link>
</el-menu-item>

4. Define <router-view> in App.vue as a component switch

//After defining <router-link> in the custom component, send a route request and find the corresponding vue component in the routing table. Finally, VueRouter will switch the component in <router-view> for View updated. 
eg:
<template>
  <div id="app">
    <!-- {
  
  {message}} -->
    <!-- <element-view></element-view> -->
    <!-- <emp-view></emp-view> -->
    <router-view></router-view>
  </div>
</template>

<script>
// import EmpView './views/tlias/EmpView.vue'
// import ElementView './views/Element/ElementView.vue'
export default {
  components: { },
  data(){
    return {
      "message":"hello world"
    }
  }
}
</script>
<style>

</style>

6. Project packaging and deployment

1. Front-end project packaging

We complete it directly through the build button provided in the NPM script of VS Code, as shown in the figure below, just click it:

Then a dist directory will be generated in the project directory to store the front-end resources that need to be released, as shown in the following figure:

2. Front-end engineering deployment

(1) Install nginx

nginx: Nginx is a lightweight web server/reverse proxy server and email (IMAP/POP3) proxy server. It is characterized by occupying less memory and strong concurrency capabilities, and is widely used in major Internet companies.

Its directory structure: (If you want to publish the project, put the resources directly into the html directory)

(2) Deploy front-end projects

Copy the contents of the dist directory of the front-end project we packaged previously to the html directory of nginx, as shown in the following figure:

Then we start nginx by double-clicking the nginx.exe file under nginx, as shown in the following figure:

The port number of the nginx server is 80, so after successful startup, our browser can directly accesshttp://localhost:80 , port 80 can be omitted.

At this point, our front-end project has been successfully released.

Note:If port 80 is occupied, we need to configure the file throughconf/nginx.conf to modify the port number. As shown below: