vue

  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 {{age}}</div>
        </template>
        <script>
          export  default{
              data:()=>{
                  return {age:18}
              }
          }
        </script>
      2. <style>
        
        </style>
        <template>
            <div id="1name">
                my name is {{name}}
            </div>
            </template>
            <script>
                export default{
                    props: ['name']
        
                }
            </script>
    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中文手册

创作不易,转载请注明文章来源为www.full-satcker.com:邢桂帅 » vue

赞 (0)
分享到:更多 ()

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. LarkDamn, I wish I could think of sonmhtieg smart like that!回复