黑马程序员技术交流社区

标题: 【郑州校区】前端与移动开发之vue-day6（1） [打印本页]

---

作者: 谷粒姐姐    时间: 2018-11-21 10:17
标题: 【郑州校区】前端与移动开发之vue-day6（1）
注意：

有时候使用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)
  
  
  
      });
  
  

  
  

---

作者: 重庆中心    时间: 2019-8-9 11:27
楼主 这个帖子很棒噢！



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

     大前端时代，助你成为IT行业紧缺人才！
     开班时间：2019年8月13日
     首期班特惠：基础班免费，首期就业班减免1000元 ！！  ！

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2