什么是脚手架
vue-cli是vue官方提供的一个全局模块包(通过命令工具行来使用), 用来快速创建一个脚手架项目。
- 基于webpack
- 开箱即用,零配置
好处和能力
- 统一的项目结构(文件夹+文件+配置代码)
- 开发过程中的webpack各系列支持
-
- babel支持
- eslint约束语法风格（代码风格）
- 样式预处理器less
- vue单文件支持
- 提供一个开发时服务器，预览代码（预览项目）
-
- 自动刷新，方便预览
- 热更新 (只刷新修改的部分)
- 基于nodejs的命令行工具
全局安装命令
npm install -g @vue/cli
1. 创建项目
// vue和create是命令, vuecli-demo是文件夹名,文件名自己根据项目取都可以
vue create vuecli-demo
2. 选择模板
通过键盘的上下箭头选择合适的模板，如果选择错了，可以按下ctrl+c终止操作。
先从vue2开始
3. 回车安装依赖
等待脚手架工作自动生成项目文件夹+文件， 并下载必须的第三方包。可能要花很久~~~
4. 启动项目
进入脚手架项目下, 启动服务，查看效果
//上面图片最下面圈出来的两行代码
cd vuecil-demo
npm run serve
只要看到绿色的 - 啊. 你成功了(底层node+webpack热更新服务)
打开浏览器输入上述地址:上面图片圈出来代码的下面不是给了两个地址吗,就用上面的那一个地址
初始项目目录结构
vuecil-demo # 项目目录
├── node_modules # 项目依赖的第三方包
└── public # 静态文件目录
├── favicon.ico# 浏览器小图标
└── index.html # 单页面的html文件(网页浏览的是它)
├── src # 业务文件夹=》写代码
├── assets # 静态资源
└── logo.png # vue的logo图片
├── components # 组件目录
└── HelloWorld.vue # 欢迎页面vue代码文件
├── App.vue # 整个应用的根组件
└── main.js # 入口js文件
├── package.json # 描述项目及项目
├── .gitignore # git提交忽略配置
├── babel.config.js # babel配置
├── README.md # 项目说明
└── package-lock.json # 项目包版本锁定和下载地址
代码运行流程
整套代码是基于webpack的。
项目打包
npm run build
vue-cli 覆盖webpack配置
目标
使用vue.config.js覆盖webpack的配置。
背景
项目中没有webpack.config.js文件，因为vue用的vue.config.js
操作
项目根目录下新建vue.config.js（和src同级）补充devServer
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer:{
host: 'localhost',
open: true,
port: 3000
},
lintOnSave: false // 关闭eslint
})
重启项目，查看效果
vue单文件组件与组件化开发
.vue文件是单文件组件
- 后缀名是.vue
- webpack会使用额外的loader来处理它
- 一个
.vue文件就是一个组件（页面） - 整个项目（页面）就是由多个组件构成的
基本组成
由三个部分组成：template + script + style
- template : 决定模块。类似于.html
- script： 代码逻辑。类似于.js
- style: 样式
<template>
<div class="box">
我是html模板
</div>
</template>
<script>
// 我是js逻辑
export default {
data() {
return {
// 定义变量，数据
}
}
}
</script>
<style>
/* 我是css样式 */
.box {
color:red
}
</style>
学习的准备工作
后面写别的代码都写在创建的文件里面
