Webpack 4.X combined with Vue 2.X

# Vue.js

# # Note:

Sometimes using ' npm I node-sass-d ' cannot be installed, this time, you must use ' cnpm I node-sass-d '

# # Render a component using the Render function in a normal page

# # in Webpack configuration. Vue Component Page Parsing

1. Run ' cnpm i vue-s ' to install Vue as a running dependency;

2. Run ' cnpm i vue-loader vue-template-compiler-d ' to install the package that resolves the conversion vue as a development dependency;

3. Run ' cnpm i style-loader css-loader-d ' to install a package that resolves the converted CSS as a development dependency because the CSS style is written in the. vue file;

4. In ' Webpack.config.js ', add the following ' module ' rule:

```

Module: {

Rules: [

{test:/\.css$/, use: [' Style-loader ', ' Css-loader ']},

{test:/\.vue$/, use: ' Vue-loader '}

]

}

```

5. Create the ' app.js ' component page:

```

<template>

<!--Note: in the. Vue component, the template must have only a unique root element in the package, usually using a div as the unique root element--

<div>

</div>

</template>

<script>

Note: In the. Vue component, defining the behavior of the component through the script tag, you need to export a Vue instance object using the export default method provided in ES6

Export Default {

Data () {

return {

msg: ' OK '

}

}

}

</script>

<style scoped>

H1 {

color:red;

}

</style>

```

6. Create the ' main.js ' entry file:

```

Import Vue Components

Import vue from ' Vue '

Import App Components

Import App from './components/app.vue '

Create a Vue instance and render the specified component using the Render function

var vm = new Vue ({

El: ' #app ',

Render:c = C (App)

});

```

# # Use template objects in Vue projects built using Webpack?

1. Add the ' resolve ' attribute in ' webpack.config.js ':

```

Resolve: {

Alias: {

' vue$ ': ' Vue/dist/vue.esm.js '

}

}

```

# # ES6 Summary of syntax usage

1. Use the ' export default ' and ' exports ' members in the exported module; corresponding to the ' module.exports ' and ' export ' in ES5

2. Use ' Import * * from * ' and ' import ' path ' also ' import {A, B} from ' Module ID ' ' for importing other modules

3. Use the arrow function: ' (A, b) = = {return a-A;} `

# # on the Vue Components page, integrate the Vue-router routing module

[Vue-router website] (https://router.vuejs.org/)

1. Import the Routing module:

```

Import vuerouter from ' Vue-router '

```

2. Install the Routing module:

```

Vue.use (Vuerouter);

```

3. Import the components that need to be displayed:

```

Import login from './components/account/login.vue '

Import register from './components/account/register.vue '

```

4. Create a Routing object:

```

var router = new Vuerouter ({

Routes: [

{path: '/', redirect: '/login '},

{path: '/login ', component:login},

{path: '/register ', component:register}

]

});

```

5. Attach the routing object to the Vue instance:

```

var vm = new Vue ({

El: ' #app ',

Render:c = {return c (App)}

Render (c) {

return C (APP);

},

Router//Attach the Routing object to the Vue instance

});

```

6. Retrofit the App.vue component, and in the template, add ' router-link ' and ' Router-view ':

```

<router-link to= "/login" > Login </router-link>

<router-link to= "/register" > Registration </router-link>

<router-view></router-view>

```

# # CSS Scope issues in components

# # Extraction route to a separate module

# # using the Hungry Mintui components

[Github Warehousing Address] (Https://github.com/ElemeFE/mint-ui)

[Mint-ui Official documents] (HTTP://MINT-UI.GITHUB.IO/#!/ZH-CN)

1. Import All Mintui components:

```

Import Mintui from ' Mint-ui '

```

2. Import the style sheet:

```

Import ' Mint-ui/lib/style.css '

```

3. Use Mintui in Vue:

```

Vue.use (Mintui)

```

4. Examples of use:

```

<mt-button type= "PRIMARY" size= "large" >primary</mt-button>

```

# # using the MUI component

[Official Homepage] (http://dev.dcloud.net.cn/mui/)

[Document Address] (http://dev.dcloud.net.cn/mui/ui/)

1. Import the MUI style sheet:

```

Import '.. /lib/mui/css/mui.min.css '

```

2. Add a new loader rule in ' webpack.config.js ':

```

{test:/\. (PNG|JPG|GIF|TTF) $/, use: ' Url-loader '}

```

3. Try to use the relevant components according to the official documentation and example

# # project Source is hosted in Oschina

1. Click on avatar, modify data--SSH public key [how to generate SSH public key] (http://git.mydoc.io/?t=154712)

2. Create your own empty storage, use ' git config--global user.name ' username ' and ' git config--global user.email ***@**.com ' to globally configure the user's name and mailbox at the time of submission

3. Initialize the project locally using ' git init '

4. Use ' Touch readme.md ' and ' touch gitignore ' to create the project's documentation and ignore files;

5. Use ' git Add. ' To host all files in git

6. Commit the project locally using ' git commit-m ' init project '

7. Use ' Git Remote Add origin storage address ' to connect local project and Remote Storage and use Origin's most remote Storage alias

8. Push local code into storage using ' Git push-u Origin master '

# # Basic Settings for App.vue components

1. The fixed navigation bar of the head uses the ' Header ' component of ' mint-ui ';

2. The bottom tab uses ' MUI ' for ' Tabbar ';

3. The shopping cart icon, using ' Icons-extra ' in the ' Mui-icon-extra Mui-icon-extra-cart ', while, should be its dependent font icon file ' Mui-icons-extra.ttf ', copied to ' Fonts ' The catalogue!

4. The bottom of the page, change the "router-link" to achieve a single page switch;

5. Two ways to set highlighting when Tab Bar is active:

+ The global setting style is as follows:

```

. router-link-active{

color: #007aff!important;

}

```

+ or in ' New Vuerouter ', specify the highlighted class by ' Linkactiveclass ':

```

//Create a Routing object

var router = new Vuerouter ({

Routes: [

{path: '/', redirect: '/Home '}

],

Linkactiveclass: ' Mui-active '

});

```

# # Implementation of Tabbar page switching of different component pages

1. Transform the Tabbar into ' router-link ' form and specify the ' to ' attribute for each connection;

2. Import the components that need to be displayed in the portal file and create the routing objects:

```

Import the components that need to be shown

Import Home from './components/home/home.vue '

Import Member from './components/member/member.vue '

Import Shopcar from './components/shopcar/shopcar.vue '

Import Search from './components/search/search.vue '

Creating a Routing Object

var router = new Vuerouter ({

Routes: [

{path: '/', redirect: '/Home '},

{path: '/home ', component:home},

{path: '/member ', component:member},

{path: '/shopcar ', Component:shopcar},

{path: '/search ', component:search}

],

Linkactiveclass: ' Mui-active '

});

```

# # using the Mt-swipe Carousel Diagram component

1. False data:

```

Lunbo: [

' Http://www.itcast.cn/images/slidead/BEIJING/2017440109442800.jpg ',

' Http://www.itcast.cn/images/slidead/BEIJING/2017511009514700.jpg ',

' Http://www.itcast.cn/images/slidead/BEIJING/2017421414422600.jpg '

]

```

2. Introduce the Carousel Diagram component:

```

<!--Mint-ui Carousel Diagram Component--

<div class= "Home-swipe" >

<mt-swipe:auto= "4000" >

<mt-swipe-item v-for= "(item, I) in Lunbo": key= "I" >

</mt-swipe-item>

</mt-swipe>

</div>

</div>

```

# # Get data using ' Vue-resource ' in the '. Vue ' component

1. Run the ' cnpm I vue-resource-s ' mounting module

2. Import Vue-resource Components

```

Import Vueresource from ' Vue-resource '

```

3. Using the Vue-resource component in Vue

```

Vue.use (Vueresource);

```

{"Name": "Itestingweb", "Version": "1.0.0", "description": "", "Main": "Index.js", "scripts": {"test": "Echo \" E Rror:no Test specified\ "&& exit 1", "Dev": "Webpack--mode Development", "Build": "Webpack--mode producti  On "," Start2 ":" Webpack-dev-server--open--port--contentbase src--hot "," Start ":" Webpack-dev-server--open --mode Development "}," Author ":" "," License ":" ISC "," dependencies ": {" bootstrap ":" ^4.1.3 "," jquery ":" ^3.3 .1 "," Popper.js ":" ^1.14.4 "," Vue ":" ^2.5.17 "}," Devdependencies ": {" Babel-core ":" ^6.26.3 "," Babel-loader ":" ^7.1.5 "," Babel-plugin-transform-runtime ":" ^6.23.0 "," babel-preset-env ":" ^1.7.0 "," babel-preset-stage-0 ":" ^6.24.1 "," Clean-webpack-plugin ":" ^0.1.19 "," Css-loader ":" ^1.0.0 "," File-loader ":" ^1.1.11 "," html-webpack-p    Lugin ":" ^3.2.0 "," less ":" ^3.8.0 "," Less-loader ":" ^4.1.0 "," Node-sass ":" ^4.9.2 "," Sass-loader ":" ^7.1.0 ", "Style-loader": "^0.21.0 "," Url-loader ":" ^1.0.1 "," Vue-loader ":" ^15.2.6 "," Vue-router ":" ^3.0.1 "," Vue-template-compiler ":" ^2.5.1 7 "," Webpack ":" ^4.16.4 "," webpack-cli ":" ^3.1.0 "," Webpack-dev-server ":" ^3.1.5 "}}

Webpack 4.X combined with Vue 2.X