Vue CLI 命令行工具

作者: _10_01_ | 来源:发表于2016-12-21 14:42 被阅读180次

    Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。

    Vue
    安装

    Vue CLI 类似于 IDE 中的 New Project,可以快速创建一个新的工程,

    # 全局安装 vue-cli
    $ npm install --global vue-cli
    # 创建一个基于 webpack 模板的新项目
    $ vue init webpack my-project
    # 安装依赖,走你
    $ cd my-project
    # install dependencies
    $ npm install
    # serve with hot reload at localhost:8080
    $ npm run dev
    # build for production with minification
    $ npm run build
    

    安装时建议使用国内镜像

    npm install -g cnpm --registry=https://registry.npm.taobao.org
    
    项目结构

    index.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Vue</title>
    </head>
    <body>
        <div id="app"/>
    </body>
    </html>
    

    mian.js

    import Vue from 'vue'
    // 导入 Hello 组件,并命名为 APP
    import APP from './components/Hello'
    
    // 创建实例
    new Vue({
    // 挂载到 index.html 的 id 为 app 元素
    el: '#app',
    template: '<APP/>',
    components: { APP },
    })
    
    // main.js 中的 template 和 components 两个属性不能少
    

    Hello.vue

    <template>
        <!-- 只能有一个根元素 -->
        <p>{{ name }} 你好!</p>
    </template>
    
    <script>
    // 导出对象
    export default {
        data () {
            return {
                name: '世界'
            }
        }
    }
    </script>
    
    <style>
    p {
        color: red
    }
    </style>
    
    ECMAScript 6 模块系统

    无论使用何种编程语言开发大型应用,最关键的特性就是代码模块化。这个概念在不同的编程语言里有着不同的命名,在C里为头部文件,C++和C#里为命名空间,Java中为包,名称不一样但解决的是同一问题。

    使用关键字 default,可将对象标注为 default 对象导出。default 关键字在每一个模块中只能使用一次;
    关键字export default后可跟随任何值:一个函数、一个类、一个对象字面量,只要你能想到的都可以。

    export default {
        // ES6 function 函数简写 
        data () {
            return {
                name: 'Vue'
            }
        }
    }
    

    Node 模块化方案

    module.exports = {
        data: function () {
            return {
                name: 'Vue'
            }
        }
    }
    
    参考资料

    相关文章

      网友评论

        本文标题:Vue CLI 命令行工具

        本文链接:https://www.haomeiwen.com/subject/jecfvttx.html