chaihongjun.me

[Vue]入门学习之十五Vue的脚手架相关概念和SFC单文件组件

Vue CLi是什么?来自官方的介绍:

    Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:

  •             通过 @vue/cli 搭建交互式的项目脚手架。

  •             通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。

  •             一个运行时依赖 (@vue/cli-service),该依赖:

    •                 可升级;

    •                 基于 webpack 构建,并带有合理的默认配置;

    •                 可以通过项目内的配置文件进行配置;

    •                 可以通过插件进行扩展。

  •             一个丰富的官方插件集合,集成了前端生态中最好的工具。

  •             一套完全图形化的创建和管理 Vue.js 项目的用户界面。

    Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject。

    言简意赅的说,vue cli就是一套帮助开发者使用vue框架的命令行工具。
相比较于vue-cli2.X,@vue/cli 3.X 在经过项目初始化之后目录结构简化了很多:
[Vue]入门学习之十五Vue的脚手架相关概念和SFC单文件组件
在没有使用脚手架开发过程中,我们使用CDN或类CDN 方式加载VUE。在进行更复杂开发过程中,显然是不合适的。于是,我们需要将VUE开发模块化组件化。
在VUE的项目中,一个.vue文件就是一个组件。拆分的组件低耦合,方便扩展与维护。SFC单文件组件规范如下:
 

<!-- HTML模板部分 在一个.vue文件中有且只有一个 -->
   
<template>
   
  <div id="app">
   
    <img alt="Vue logo" src="./assets/logo.png">
   
    <!-- 引入子组件 并传递父组件的值给子组件 -->
   
    <HelloWorld msg="Welcome to Your Vue.js App" :title="title" :frontEnd="frontEnd"/>
   
  </div>
   
</template><!-- 2.业务逻辑行为部分 主要是本组件选项设置部分 同样也是有且仅有一个 -->.
   
<script>
   
//导入子组件模块
   
import HelloWorld from './components/HelloWorld.vue'
     
export default {
   
  name: 'app',
   
  //注册子组件
   
  components: {
   
    HelloWorld
   
  },
   
  data(){
   
      return {
   
         title:"我的第一个Vue demo!",
   
         frontEnd:[
   
              {name:"html"},
   
              {name:"css"},
   
              {name:"javascript"}
   
         ]
   
      }
   
  }
   
}
   
</script>
   
<!-- CSS样式部分,可以有多个  -->
   
<style>
   
#app {
   
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
   
  -webkit-font-smoothing: antialiased;
   
  -moz-osx-font-smoothing: grayscale;
   
  text-align: center;
   
  color: #2c3e50;
   
  margin-top: 60px;
   }
</style>

     

     

知识共享许可协议本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。作者:柴宏俊»