侧边栏壁纸
  • 累计撰写 120 篇文章
  • 累计创建 281 个标签
  • 累计收到 11 条评论
标签搜索
隐藏侧边栏

vue

骐骏
2016-10-16 / 0 评论 / 0 点赞 / 299 阅读 / 0 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2016-10-27,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
  1. vue-loader安装
    1. npm install vue-loader --save-dev
    2. webpack-config.js配置
      1. {test:/\.vue$/,loader:"babel!vue", exclude: "/node_modules/"},
        其中"babel!vue"中叹号"!"代表连接符,表示两个loader连续执行,执行顺序从有向左,即先执行vue loader再执行babel
  2. "热运行",webpack-dev-server
    1. 安装 npm install webpack-dev-server --save-dev
    2. webpack-config.js配置
      1. entry:
        {
            "index":[__dirname+'/src/jssrc/index.js',,'webpack-dev-server/client?http://127.0.0.1:8080']
        },
        output: {
            publicPath: "http://127.0.0.1:8080/",
            path: __dirname+'/src/webapp/js',  //输出文件夹
            filename:'[name].js'   //最终打包生成的文件名(just 文件名,不带路径的哦)
        },
      2. plugins:[
            new HtmlWebpackPlugin({
                // filename: __dirname+'/src/webapp/index.html',//目标文件
                filename:"index.html",//使用webpack-dev-server时配置
                template: __dirname+'/src/html/index.html',//模板文件
                inject:'body',
                hash:true,
                chunks:["index"]
            })
        

        ]

    3. 访问 localhost:8080
  3. vue 组件定义
    1. 组件定义文件:myage.vue
    2. 组件定义代码
      1. <style>
        
        #myage{color:red}
        

        </style>
        <template>
        <div id="myage"> my age is {}</div>
        </template>
        <script>
        export default{
        data:()=>{
        return

        }
        }
        </script>

      2. <style>
        

        </style>
        <template>
        <div id="1name">
        my name is {
        }
        </div>
        </template>
        <script>
        export default{
        props: ['name']

            }
        &lt;/script&gt;</pre>
        
    3. 父子组件
      1. <template>
            <div id="person">
                <myage v-bind:age="age"></myage>
                <myname v-bind:name="name"></myname>
            </div>
        </template>
        <style>
        

        </style>
        <script>
        import myage from './myage.vue';
        import myname from './myname.vue';
        export default{
        props:["name","age"],
        components:{
        'myage':myage,'myname':myname

            }
        }
        

        </script>

      2. 注意:v-bind后面对应的变量是子变量的属性
  4. 安装bootstrap font loader
    1. npm install file-loader --save-dev
    2. webpack.config.js增加配置
      1. {test:/\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,loader:"file" }
  5. vue2.0中文手册
0

评论区