本文主要介绍以下几个知识点：

• 开发vue的两种方式
• vue-cli介绍
• vue-cli基本使用
• 覆盖webpack配置
• 目录分析与清理
• 单文件组件介绍

开发vue的两种方式

• 传统开发模式：基于html/css/js文件开发vue（缺点：无法使用模块化语法，不适合项目开发）

  
  
  image.png

• 工程化开发模式：在webpack/vite环境下开发vue，现在的主流开发模式，可以享受webpack给前端开发带来的各种遍历。推荐
  

  image.png

vue-cli介绍

@vue/cli 也叫 vue脚手架, @vue/cli 是vue官方提供的一个全局命令工具，这个命令可以帮助我们快速的创建一个vue项目的基础架子。

脚手架: 为了保证各施工过程顺利进行而搭设的工作平台

image.png

vue脚手架的好处：

• 开箱即用（只需要安装一个全局命令就可以使用）
• 零配置（不用配置任何的webpack就能使用，如果有额外需求也可以覆盖webpack配置）
• 内置babel、eslint等工具。

vue-cli基本使用步骤

掌握vue-cli创建vue项目

• 全局安装vue-cli

npm i @vue/cli -g

• 查看vue版本 (目前最新版本5.0.4)

vue --version   

• 初始化项目

vue create vue-demo

• 创建vue2项目

image.png

• 选择安装包的工具

image.png

• 等待安装完成，启动项目

cd vue-demo
npm run serve   

image.png

• 访问：http://localhost:8080/ 查看效果

image.png

覆盖webpack配置

我们在初始化好的vue项目中，无法找到webpack的配置文件，那我们如何覆盖webpack的配置呢？

image.png

如果需要覆盖webpack的配置，可以在vue.config.js文件，覆盖webpack配置文件

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    // 自动打开浏览器
    open: true,
    // 项目端口
    port: 3000,
    // 项目主机名
    host: 'localhost'
  }
})

重新运行npm run serve命令，这时你会发现会自动打开浏览器，端口号也变成了3000了。

目录分析与清理

vue脚手架初始化的项目目录有点复杂，有很多文件，这些文件代表什么意思呢，我们又如何在项目中进行开发？

每个文件的作用介绍（了解）

image.png

大部分都是一些配置文件，我们只需要在src中进行开发即可。

修改src目录，只保留main.js和App.vue

• src/main.js不用动， 渲染了App.vue组件
• src/App.vue默认有很多的内容，可以全部删除，添加以下代码

<template>
  <div>hello</div>
</template>

assets文件夹与components直接删除

在浏览器端查看效果

image.png

vue单文件组件说明

一个.vue文件就是一个组件,后续开发vue，所有的功能都是基于组件实现。

想要让vscode认识.vue文件，并且提供高亮，需要安装插件

image.png

一个单文件组件由三部分构成

• template(必须) 影响组件渲染的结构 （只能有一个根元素）
• script 逻辑 js
• style 样式

<template>
  <div class="app">hello</div>
</template>

<script>
console.log('哈哈哈')
export default {}
</script>

<style>
.app {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
}
</style>

style用于提供组件的样式，默认只能用css

可以通过lang="less"开启less的功能，需要安装依赖包

npm i less-loader less -D

安装依赖包之后，项目就支持less了，如果想要支持sass，同理安装对应的依赖包即可。

<template>
  <div class="app">hello</div>
</template>

<script>
console.log('哈哈哈')
export default {}
</script>

<style lang="less">
.app {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
}
</style>

总结

• 开发vue的两种方式

  • 传统开发，基于html/css/js进行开发
  • 基于webpack环境开发，推荐

• vue-cli介绍

  • vue-cli的作用是快速的创建一个vue项目，开箱即用，零配置。

• vue-cli基本使用

  • 全局安装 npm i -g @vue/cli
  • 初始化项目 vue create 项目名
  • 启动项目 npm run serve

• 覆盖webpack配置

  • 在vue.config.js可以覆盖webpack的配置

• 单文件组件组成

  • template: 提供模板
  • script: 提供逻辑
  • style: 提供样式
  • 需要安装vetur插件