How to use Vuejs in a project

With Vuejs, the first step is definitely to install it. We used to import locally downloaded Vuejs. In a real project we would install a VUE package through NPM and then use VUejs.

Install Vuejs

NPM install [email protected] - saveCopy the code

Vue is not a development-time dependency, and it definitely depends on Vuejs when you run your project: runtime dependency.

Use Vuejs in your project

To review how we used the PATH package, we imported it when require. So when we use Vuejs, we must import it as well. When Vuejs is downloaded, it is placed in the node_modules folder, which houses the modules (packages) that Node depends on. Command to import vue

import Vue from "vue"
Copy the code

This command will find the vue folder from node_modules and export it, because there is export default in vue.js. Export by default. This allows us to use Vuejs in our project. main.js:

Let app = new Vue({el:"#app", data:{message:" I am a pig "}})Copy the code

index.html:

body>
    <div class="classA"></div>
    <div class="classB"></div>
    <div id="app">
        {{message}}
    </div>
</body>
<script src="./dist/bundle.js"></script>
</html>

Copy the code

Repack and run. Error reported on discovery.

** What’s the reason? There are actually many versions of Vue. One is running-only. The other is running-compiler. The only difference is that you can compile Vue templates. Runtime-conpiler has more code to compile template than runtime-only does.

For the solution, we could only use the Run-time Compiler version of VUE.Add a resolve attribute to the exported object and an alias attribute to the exported object. This tells WebPack that if you encounter vue, you should go to vue.js for that path. So that oneimport Vue from "vue"When you encounter vUE, you go to the vUE of the path. Out of curiosity, I took a look at the VUE under this pathTurns out he does have a lot of versions.

The template and el

Template options does not exist in Vue instances. OuterHTML

{{message}

will be used as a template for the HTML corresponding to the outerHTML mount point. Another question: what happens when both EL and template exist? The HTML content of the template completely replaces the mount point.

Vue component development

The first step is to extract the root instance

Since we can replace the contents of the mount point with the template template, we can extract the contents of the mount point into the template and modify the template directly. index.html:

The < body > < div class = "classA" > < / div > < div class = "classB" > < / div > < div id = "app" > / / only one div # app < / div > < / body >Copy the code

main.js:

Import Vue from "Vue" let app = new Vue({el:"#app", data:{message:" I am a pig "}, The template: ` < div > / / the contents of the original template to {{message}} < / div > `})Copy the code

In the second step, continue to extract the root instance

We really only need a shell of the root instance, splitting the contents into a subcomponent. main.js:

import Vue from "vue" const cpn = { template:`<div> {{message}} </div>`, Data (){return {message:" #app"}} let app = new Vue({el:"#app", template: '< CPN />', components:{CPN}})Copy the code

So I’m taking all of the actual content out of the app instance and I’m taking it as a component, why would I want to take it as a component? Js has a special file format for storing components:.vue files. We can just put the component here, and our page structure will be clearer

The third step is to extract the component into a.vue file

Extract CPN components app.vue:

<template> <div> {{message}} </div> </template> <script> export default {data(){return {message :" I am a pig "}} </script>  <style> </style>Copy the code

Note that if you use vscode for development. After creating the.vue file, the basic template for the vue file, you need to download a vscode plug-in: vetur. Then type D +table in the.vue file. After you extract the component and use it in main.js, of course you have to import it.

Import Vue from "Vue" import CPN from "./components/ app. Vue" Template: '< CPN />', components:{CPN //Copy the code

Import CPN from “./components/ app.vue “note that if you want to omit the.vue suffix, you need to configure it in webpack.config.js

Alias :{"vue$":"vue/dist/vue.esm.js"}}Copy the code

Package. Vue files

If we package directly, we will definitely get an error because Webpack does not package.vue files, so what can we do? Of course, install the corresponding Loader.

NPM install [email protected] --save-dev [email protected]Copy the code
  • Vue-loader Loads a. Vue file
  • Vue-template-compiter compiles the template with vue template-compiter. Crazy errors at the beginning)

Configure the vue – loader

 {
            test: /\.vue$/,
            use: ['vue-loader']
      }
Copy the code

Pack again. No problem at all.