vue脚手架的安装和使用

• vue的脚手架工具——vue/cli

  • 特点

    • Vue CLI 是⼀个基于 Vue.js 进行快速开发的完整系统
      Vue CLI: Vue command line interface vue命令行接口
      特点:
       1.一个运行时依赖 (@vue/cli-service)，该依赖：
       2.可升级；
       3.基于 webpack 构建，并带有合理的默认配置；
       4.可以通过项目内的配置文件进行配置；
       5.可以通过插件进行扩展。
       6.一个丰富的官方插件集合，集成了前端生态中最好的工具。
       7.一套完全图形化的创建和管理 Vue.js 项目的用户界面。

    • 注意：上述特点中唯一需要注意的是 vue/cli是一个基于webpack构建的工具 因此在使用vue/cli之前 要确保自己本地计算机 安装过webpack

• vue/cli的使用步骤

  • 1.安装：npm install -g @vue/cli

    • 测试脚手架安装成功与否的命令：vue -V

  • 2.创建项目：vue create 项目名称（只能是英文，且不能有大写字母）

  • 3.进入项目文件夹：cd 项目文件夹名

  • 4.运行vue项目：npm run serve

• 当然 我们也可以使用图形化界面 来实现项目的创建和管理

  • 1.安装：npm install -g @vue/cli

    • 测试脚手架安装成功与否的命令：vue -V

  • 2.启动vue/cli的图形化界面：vue ui

4.1vue脚手架搭建的项目目录

• vue脚手架搭建项目的目录详解

   

  • 1.node_modules：用来存放下载好的第三方模块包

  • 2.public：用来存放公共资源

    • 注意：public文件夹中存放的资源 是静态资源，如果使用 应该使用绝对路径来引入

  • 3.src：

    • assets文件夹：这个文件夹中 也是用来存放 资源文件的

      • 注意：这个文件夹中存放的资源文件 可以使用 相对路径来引入 并使用

    • components文件夹：这个文件夹 是用来存放 项目中 要用到的组件的

    • app.vue：根组件

      • 注意：在真正的vue项目中 所有组件都是后缀名为vue的文件

      • 我们可以在这些文件中 写入一个组件的模板内容、配置对象、css样式

    • main.js：vue项目的运行文件

  • 4..gitignore：git配置忽略文件的文件

  • 5.babel.config.js : 配置babel工具的配置文件

  • 6.jsconfig.json : 这个配置文件主要是给我们的js进行相关智能提示及格式化等提供这类操作 方便开发者编写js

4.2vue脚手架项目的简单编写

• es6的模块化语法

  • 之前我们在三阶段的时候 学到过 node提供的模块化语法(commonjs)

    • //暴露
      module.exports
      exports
      ​
      //引入
      let xxx = require("模块名/路径")

  • es6中 也提供了js使用的模块化语法

    • //暴露
      export default 要暴露的数据
      ​
      //引入
      //1.单独引入文件
      import "文件路径"
      //2.从模块文件中引入数据 其实就是引入js文件中暴露的数据
      import 变量名 from "路径"
      import {属性名} from "路径"
      ....

  • 我们在编写vue项目代码的时候 需要使用到es6的模块化语法

• vue脚手架项目的编写

  • 1.删除脚手架默认设置的一些文件

    • src/components文件夹中 所有预制的子组件 统统删掉

    • 打开App.vue 将其中引入子组件 注册子组件 使用子组件的代码都删掉

    • 将App.vue文件中的 template模板的内容 除了 根元素之外 所有内容清空

  • 2.编写组件

    • 在src/components文件夹中 写入我们自己的组件文件 xxx.vue

    • .vue文件的内容由三部分组成——template（模板） script（配置js文件）style（css样式）

      • 我们可以通过快捷键来只能提示——输入vue 回车即可

    • 编写vue文件内容

      • <!-- 由于vue文件中自带模板 因此 在配置对象中 不需要设置template属性来指定模板 -->
        <template>
            <div>
                <h1>狗蛋我爱你！！！</h1>
            </div>
        </template>
        ​
        <script>
        // es6的模块化语法  暴露数据
        //我们需要将vue文件中组件的配置对象 暴露出去 方便使用本组件的父组件 来注册
        //这里我们暴露的就是当前组件的配置对象
        export default {};
        </script>
        ​
        <style lang="scss" scoped>
        ​
        </style>

  • 3.在父组件中 引入 要使用的子组件

  • 4.注册子组件