VUE：项目的创建编写打包及规范检查

Posted 2021-01-20 it-taosir

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUE：项目的创建编写打包及规范检查相关的知识，希望对你有一定的参考价值。

VUE：项目的创建、编写及打包

项目的创建

使用 vue-cli 创建模板项目（官方提供的脚手架工具）

npm install -g  vue-cli
vue init webpack vue_demo
cd vue_demo
npm install
npm run dev
访问：http://localhost:8080/

第一个命令需要有npm。可以使用node -v查看是否已经安装，如没有可用下面的传送门

npm是什么及其安装

第二个命令使用时注意切换到想要创建的位置

技术分享图片

http://localhost:8080

技术分享图片

项目的编写

技术分享图片

HelloWorld.vue

<template>
  <div>
      <p class="msg">{{msg}}</p>
  </div>  
</template>

<script>
export default {    //配置对象（与Vue一致）
  data () {
    return {
      msg: ‘TaoSir is studying...‘
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    .msg{
        color:red;
        font-size: 30px;
    }
</style>

App.vue

<template>
  <div id="app">
    <img class="logo" src="./assets/logo.png" alt="logo">
    <!--3.使用组件标签    -->
    <HelloWorld/>
  </div>
</template>

<script>
    //1.引入组件
import HelloWorld from ‘./components/HelloWorld‘

export default {
    //2.映射组件标签
  name: ‘App‘,
  components: {
    HelloWorld
  }
}
</script>

<style>
.logo{
    width: 200px;
    height: 200px;
}
</style>

main.js

/*
 * 入口js：创建Vue实例
 */
import Vue from ‘vue‘
import App from ‘./App‘

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
    render: h => h(App)
})