A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

注意:
有时候使用npm i node-sass -D装不上,这时候,就必须使用 cnpm i node-sass -D
在普通页面中使用render函数渲染组件在webpack中配置.vue组件页面的解析
  • 运行cnpm i vue -S将vue安装为运行依赖;
  • 运行cnpm i vue-loader vue-template-compiler -D将解析转换vue的包安装为开发依赖;
  • 运行cnpm i style-loader css-loader -D将解析转换CSS的包安装为开发依赖,因为.vue文件中会写CSS样式;
  • 在webpack.config.js中,添加如下module规则:
  • [AppleScript] 纯文本查看 复制代码
    module: {
    
        rules: [
    
          { test: /\.css$/, use: ['style-loader', 'css-loader'] },
    
          { test: /\.vue$/, use: 'vue-loader' }
    
        ]
    
      }
    
  • 创建App.js组件页面:
  • [AppleScript] 纯文本查看 复制代码
    <template>
    
          <!-- 注意:在 .vue 的组件中,template 中必须有且只有唯一的根元素进行包裹,一般都用 div 当作唯一的根元素 -->
    
          <div>
    
            <h1>这是APP组件 - {{msg}}</h1>
    
            <h3>我是h3</h3>
    
          </div>
    
        </template>
    
    
    
        <script>
    
        // 注意:在 .vue 的组件中,通过 script 标签来定义组件的行为,需要使用 ES6 中提供的 export default 方式,导出一个vue实例对象
    
        export default {
    
          data() {
    
            return {
    
              msg: 'OK'
    
            }
    
          }
    
        }
    
        </script>
    
    
    
        <style scoped>
    
        h1 {
    
          color: red;
    
        }
    
        </style>
    
  • 创建main.js入口文件:
  • [AppleScript] 纯文本查看 复制代码
    // 导入 Vue 组件
    
        import Vue from 'vue'
    
    
    
        // 导入 App组件
    
        import App from './components/App.vue'
    
    
    
        // 创建一个 Vue 实例,使用 render 函数,渲染指定的组件
    
        var vm = new Vue({
    
          el: '#app',
    
          render: c => c(App)
    
        });
    


1 个回复

倒序浏览
楼主 这个帖子很棒噢!



重庆的小伙伴福音来啦
前端与移动开发学科强势入驻传智播客·黑马程序员重庆中心           

     大前端时代,助你成为IT行业紧缺人才!
     开班时间:2019年8月13日
     首期班特惠:基础班免费,首期就业班减免1000元 !!  !
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马