study
/
vue
/
33th.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue-cli脚手架</title>
    <script>
    /**
    1.安装vue-cli，配置vue命令环境  -g表示全局
        cnpm install vue-cli -g
        vue -V   //查看脚手架,注意大小的 V
    2.初始化项目，生成项目模板
        vue init webpack-simple vue-cli-demo(项目名称)
        cd vue-cli-demo
        npm install     //安装依赖
        npm run dev     //启动服务
        npm run build   //打包输出，上线

    config  webpack配置相关
    build   打包后的文件，直接用于上线
    src     源代码
        assets 存放静态资源
        components 存放组件
        App.vue 全局vue
        mian.js 入口文件
        static  第三方静态资源
        .babelrc    es6转es5
        .editconfig IDE的配置
        .gitignore  git忽略配置
        .postcssrc.js
        index.html  入口html文件
        package.json    项目配置信息
        README.MD   markdown格式说明文件

    webpack.config.js
        entry: './src/main.js',  webpack编译入口文件

    main.js 关键说明
        import  模块化开发,导入其他模块组件，与requirejs类似，import是ES6的写法
        export  模块对外的接口，下面的name:'App',相应import 名称只能是 import App ...
                若没有名称，import可以自定义名称
            export default {
                name: 'App',
                data () {
                    return {
                    msg: 'Welcome to Your Vue.js App'
                    }
                }
            }

        export 用法
            可以导出变量，方法，对象，组件
            export default 只能导出一个对象，export 可以导出多个
            export default 导出方式，对应的import 不能用大括号
            export 在一个页面中可以有多个export ,但 export defualt 同一页面中只能是一个
            var name='hanley',age=18
            export{name,age};


            import {name,age} from xxx


        <style scoped>  表示css样式仅仅在当前页面中使用


        new Vue({
           el:'#my',
           router, //4.router实例注入到Vue
           components:{App},    //1.0的写法
           template:'<App/>
        });


        new Vue({
           el:'#my',
           router, //4.router实例注入到Vue
           render:h=>h(App) //2.0的写法
        });


        Vue.use(component)//组件全局使用

    */
    </script>
</head>
<body>

</body>
</html>