This article is mainly about vue-cli, sharing what I have learned, and also to deepen understanding. I published an article "Vue-cli Scaffolding" before, which described the basic operation steps and attached the website: https://my.oschina.net/GracefulTing/blog/1620278. In order to be more comprehensive, this article has also taken the previous content, in addition to the introduction of specific documents and content.
1. Environment installation
1. Install node, not sure whether to install it or not, run node -v on the terminal (the version needs to be above 4.0)
2. Install npm, through the Taobao mirror npm install -g cnpm --registry=https://registry.npm.taobao. org
3. To check whether the installation is successful, you can enter node -v and press Enter, and npm -v and press Enter. If there is a corresponding version number, the installation is successful.
4. Install vue-cli, npm install -g vue-cli
(if the If the vue command is not available or the error is reported without permission, you can try sudo npm install -g vue-cli)
Generally, sudo needs to be added before linux and mac installation for global installation.
5. Test whether the installation is successful: vue --version. Check the version number. If the display indicates that the installation was successful, step 4 above is not repeated.
2. vue-cli build
1. Create a new folder
2. cd folder
3. vue init webpack project name ---- initialize a project
4. When running the initialization command, you need to enter a few basic options, if you don't want to fill in, you can just press Enter to default
5. Open the folder, the project file has been generated, as shown in the figure:
build: operation file, when using npm run dev, it is the file here
config: configuration file, the configuration information needed to execute the file
src: resource file, all components and required pictures are placed here
assets: resource folder, stored Resources such as pictures
components: component folder, components are placed under this folder
router: routing folder, which determines the jump between pages
main.js: webpack entry file
6. Open the terminal in the project folder to run npm run dev runs in hot-loading mode. After modifying the code, you can see the effect without manual refresh.
7. Open localhost:8080 (default) in the browser, and you can see the corresponding interface. The default port is 8080. If you want to modify the port number, modify the port in the index.js file under config. The line in Figure 17:
3. Introduction of main documents
The overall process is index.html -> main.js -> App.vue.
1. index.html is the entry file of the entire project. The main.js file is closely related to index.html. Main.js is the logical main file of the entire project, mainly instantiating the vue object and referencing the required components.
index.html: <div id="app></div> is the root container.
2. main.js: instantiate the vue object, mainly including el, template, components.
import: used to import files that need to be depended on, import A from B: A is the name that you have given yourself, and B is the name of the component.
(1) #app in el refers to the root tag in index.html.
(2) template: component call, there is only one root tag that satisfies the template. The content here is also used as a tag.
(3)components: component registration, where App comes from './App' in import App from './App' in line 4 of the code, and the content is the component name.
3. App.vue: The root component. All pages are switched under App.vue. It can be understood that all components are sub-components of App.vue. Generally, common parts such as head, bottom and each page are The content that appears is placed in App.vue. Contains three parts:
(1) template: template, html structure
(2) script: behavior, processing logic
(3) style: style, solve the style, if the style scoped is used to indicate that the scope is limited, the style can only be used in the current file domain.
A component is actually a functional page. To create a connection between components, you need to import and then register.
There are two ways to nest subcomponents:
a. Global registration:
main.js -> import A from B;
-> Vue.component("a",A); //first name second component
b. Partial registration (generally using partial):
app.vue -> script -> import A from B;
-> export default{
components:{
"a":A //"a" can be omitted
}
}
-> html -> <a></a>
Generally speaking, after creating a new vue file, first write the main structure, and then introduce and register it in App.vue. After completion, you can call the label in the template, so as to connect the parent and child components.
Subcomponent: The name attribute is important, usually the same as the component name, lowercase. What is the name here, what is the label in App.vue.
4. Lifecycle hook function
beforeCreate(): The function executed before the component is instantiated.
created(): The component is instantiated, but the page is not displayed. (Attribute binding, dom is not generated)
beforeMount(): Before the component is mounted, the page is not displayed, but The virtual dom has been configured.
mounted(): After the component is mounted, after this method is executed, the page is displayed.
beforeUpdate(): Before the component is updated, the page has not been updated, but the virtual dom has been configured.
updated(): The component is updated, this method After execution, the page displays.
beforeDestroy(): Before the component is destroyed.
destroyed(): The component is destroyed.
5. Event value transfer
There are two ways, one is to pass by value: string number boolean, the other is to pass by reference: array object.
1. The parent component passes the child component:
extract the content to the app.vue component, label binding, child component props
2. The child component passes the parent component:
Register the event in the child component:
methods:{
this.$emit("fn","子向父组件传值"); //fn是事件名，第二个参数是传递内容
}
Then bind v-on:fn="func($event)" to the label in the parent component, where $event is fixed. Next, write the func method:
methods:func(title){
this.title= title ; //=前的title指的是父组件中定义的title,=后的title指的是传递的内容“子向父组件传值”
}
6. Routing
Vue provides us with routing jumps. Compared with the a tag jump, the a tag will make a network request and reload the page when the page is refreshed, while the routing jump will not re-request the network request or refresh the page.
You can install vue-router and choose yes when you start a new project. Of course, you can choose no in the early stage. You can reinstall it when you need it.
1. Routing module installation: npm install vue-router --save-dev
2. After installation, import routing in main.js: import VueRouter from 'vue-router' ;
Vue.use(VueRouter)；
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import HelloWorld from './components/HelloWorld'
import Home from './components/Home'
Vue.config.productionTip = false
Vue.use(VueRouter)
// 配置路由
const router = new VueRouter({
routes:[
{path:"/",component:Home},
{path:"/helloworld",component:HelloWorld}
],
mode:"history"
})
new Vue({
router,
el: '#app',
template: '<App/>',
components: { App }
})Then configure it as shown above, and give the path and components. Introduce the Home and Helloworld components import .. from .. and use router in the instantiated Vue object, which is the same level as el.
If the router is not used in new Vue, an error will be reported, as shown in the following screenshot:
3. Use the tags <router-view></router-view> and <router-link to="/"></router-link> in App.vue.
<template>
<div id="app">
<ul>
<li><router-link to="/">Home</router-link></li>
<li><router-link to="/helloworld">Hello</router-link></li>
</ul>
<router-view></router-view>
</div>
</template>It can also be used directly when instantiating an object:
new Vue({
// el: '#app',
// components: { App },
// template: '<App/>'
router,
template:`
<div id="app">
<ul>
<li>
<router-link to="/">Users</router-link>
<router-link to="/test">Test</router-link>
</li>
</ul>
<router-view></router-view>
</div>
`
}).$mount("#app")
七.HTTP
The $http service in vue needs to import a file called vue-resource.js.
1. Install the module:
npm install vue-resource --save-dev2. Introduced in main.js:
import VueResource from 'vue-resource'
Vue.use(VueResource)3. Request the interface to get data at the location that needs to be requested:
created(){
this.$http.get("http://jsonplaceholder.typicode.com/users").then((data)=>{
console.log(data);
this.users = data.body;
})
}