开始 vue-cli webpack 打包工具的demo

最新推荐文章于 2022-04-19 18:48:00 发布

暮春风

最新推荐文章于 2022-04-19 18:48:00 发布

阅读量2.2k

点赞数 1

分类专栏：前端 javascript Nodejs Vue webpack 文章标签： Vue webpack vue-cli Nodejs

本文链接：https://blog.csdn.net/nothing_is_imposible/article/details/53841625

版权

javascript 同时被 3 个专栏收录

21 篇文章 0 订阅

订阅专栏

前端

16 篇文章 0 订阅

订阅专栏

Nodejs

8 篇文章 0 订阅

订阅专栏

在命令行执行如下语句

npm install -g vue-cli
vue init webpack-simple my-project
cd my-project
npm install
npm run dev

以上步骤参考点击打开链接

完成以上步骤例子就可以跑起来了，npm install 可能会出问题，失败的同学可以去试试 cnpm

如果 npm install 失败

npm install -g cnpm --registry=https://registry.npm.taobao.org

然后

cnpm install
npm run dev

首页做了如下调整 Hello.vue

绑定事件
数据绑定
模型绑定
if
for
子组件 todo-item
子组件事件
样式（scoped 作用域）

<template>
  <div class="hello">
    <h1 @click="changeTitle">{{ msg }}</h1>
    Input text to change title. <input v-model="msg">
    <h2 :title="msg">Essential Links</h2>
    <h2 v-if="show">I would toggel if you click the title. </h2>
    
    <ol>
      <todo-item v-for="list in lists" 
      :value="list.id" 
      @click.native="showIdentify">{{list.text}}</todo-item>
    </ol>
  </div>
</template>
<style scoped>
  input {
    width: 300px;
    height: 36px;
    font-size: 18px;
  }
  li {
    cursor: pointer;
  }
</style>

<script>

export default {
  name: 'hello',
  data () {
    return {
      msg: 'Awesome Vue.js App',
      show: true,
      lists: [
        { text: 'Learn JavaScript', id: '1' },
        { text: 'Learn Vue', id: '2' },
        { text: 'Build something awesome', id: '3' }
      ]
    }
  },
  methods: {
    changeTitle() {
      this.msg = 'Wonderful Vue.js App'
      this.show = !this.show
      this.lists.push({text: 'New item'})
    },
    showIdentify(evt) {
      console.info(evt.target.getAttribute('value'))
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

引导也做了如下调整 main.js

注册了一个子组件

import Vue from 'vue'
import App from './App'

Vue.component('todo-item', {
  render(createElement) {
    return createElement(
      'li',
      this.$slots.default
    )
  }
})
/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: h => h(App)
})

最后再运行下吧