Simple use of Vue scaffolding

This article mainly introduces the simple use of Vue scaffolding, which has a certain reference value. Now I share it with everyone. Friends in need can refer to it

Statement in advance

Note: My own understanding and understanding of vue scaffolding, many things and understandings are visual techniques, not professional and official

webpack

A project construction tool that can compress css and js into a file. In addition, a test server can be provided. When using webpack, you can configure some default extensions and path aliases to use

import and export

using## directly in the project file. The #export command can export a JS object. Other JS files can use the import object name from path to import this object for use, but when importing, you must know the name of the import and export object. If you use the export default command to export an object, other JS files do not need to know the name of the exported object when importing. You can customize the object name

ps:

export and import is a keyword in the es6 specification. It is currently only implemented by a small number of JS running platforms. In the scaffolding, it will be automatically converted into the corresponding es5 syntax using babel.

is the custom tag name in the component. Case issues

When most browsers parse HTML, they do not distinguish the case of tags. The uppercase letters in the custom tag will be automatically converted into lowercase letters. For example,

will be converted into the first tag, which will result in inconsistency with the tag name provided during registration. Error where the component is not properly registered.

If you use a custom component and the code is written in the template tag, it will be parsed as JS during parsing, which is case-sensitive.

Another way to write components

---

<template>
    <!--template以下才是组件的HTML模板，仍然只能有一个根标签-->
    <p>这是我第一个组件</p>
</template>
<p>
    <first></first>
</p>
<script>
    var myTemplate = {
        template:"#first-c"
    }

    Vue.component("first",myTemplate);
    var app = new Vue({
        el:"#app"
    });
</script>

Use scaffolding to create projects

Install NodeJS

The installation and operation of the scaffolding depend on NodeJS. You can type

node -v on the command line to check whether NodeJS is installed.

Download NodeJS

Configure npm global path

npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache" Then configure the first path into the environment variable
path at the same time.

Configure Taobao npm mirror

npm config set registry https://registry.npm.taobao.org

Install vue-cli

Execute

npm install -g vue-cli in the command line.

Create template project

//vue init 模板名 项目名

vue init webpack simple

The template name can be viewed at https://github.com/vuejs-temp..., and webpack is recommended.

Then use

cd project name to enter the project root directory, and use npm install to automatically install project dependencies.

Other commonly used commands

Execute

npm run dev in the project root directory to test and run the project, execute npm run build to formally compile the project to dist Under contents.

Directory structure

Single file component

<template>
    <!--template以下才是组件的HTML模板，仍然只能有一个根标签-->
    <p>
        我是一个单文件组件
    </p>
</template>

<script>
export default {
    //无需写template，data仍然以函数返回，其他属性照旧
    data(){
        return {
        }
    },
    props:[],
    methods:{
    }
}
</script>

<!--这个scoped可以让这些样式仅在当前组件生效-->
<style>

</style>

Added: Using jquery and other frameworks in Vue scaffolding

Install jquery in the project root directory

npm install jquery (note the case, jquery and jQuery are different).

webpack.base.conf.js Add

const webpack = require("webpack")

at the end of module.exports at the beginning (pay attention to the JS code format, don’t forget Write a comma)

plugins: [
    new webpack.ProvidePlugin({
        jQuery: "jquery",
        $: "jquery"
    })
]

After that, you need to use jquery components to import juuery, such as

<script>
    import $ from &#39;jquery&#39;
    export default{
        data(){
            return {
                users:null
            }
        },
        created(){
            $.get("http://127.0.0.1:3000/all_user",function(data){
                this.users = data;
            }.bind(this))
        }
    }
</script>

. The above is the entire content of this article. I hope it will be helpful to everyone's learning. For more related content, please Follow PHP Chinese website!

Related recommendations:

File structure and operating mechanism of Vue source code

The return value of then and catch in ES6 Promise Example

The above is the detailed content of Simple use of Vue scaffolding. For more information, please follow other related articles on the PHP Chinese website!