Vue学习(7)-plugin、Vue-Cli、箭头函数、vue-router准备

最新推荐文章于 2023-12-20 16:10:31 发布

Ming-hl

最新推荐文章于 2023-12-20 16:10:31 发布

阅读量541

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_43294163/article/details/107514303

版权

一、vue的使用方法

创建vue时，当template和el同时存在时，会将template中的东西替换el中的东西。

要对.vue文件进行封装处理就需要安装vue-loader和vue-template-compiler.

npm install vue-loader vue-template-compiler --save-dev

因为脚手架还没学到，现在这个形式好像是很接近脚手架的了。

App.vue

//模版样式
<template>  
  <div>
    <h2 class="title">{
    {message}}</h2>
    <button @click="btnClick">www</button>
  </div>
</template>

//js代码
<script>
  export default {
    name: "App",
    data() {
      return {
        message: 'hello world',
      }
    },
    methods: {
      btnClick() {

      }
    }
  }
</script>

//css样式
<style scoped>
  .title {
    color: #4fc08d;
  }
</style>

main.js

import Vue from "vue";
// import App from "./vue/app";
import App from "./vue/App";
// require("./css/back.css")  commentJs的方式
import "./css/back.css";

new Vue({
     
  el: "#app",
  template: `<App/>`, //之后替换app中的东西
  components: {
     
    App
  }

})

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
</div>

<script src="./dist/bundle.js"></script>
</body>
</html>

二、plugin

最低0.47元/天解锁文章

Ming-hl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习(7)-plugin、Vue-Cli、箭头函数、vue-router准备

一、vue的使用方法创建vue时，当template和el同时存在时，会将template中的东西替换el中的东西。要对.vue文件进行封装处理就需要安装vue-loader和vue-template-compiler.npm install vue-loader vue-template-compiler --save-dev因为脚手架还没学到，现在这个形式好像是很接近脚手架的了。App.vue//模版样式<template> <div> &lt
复制链接

扫一扫