Vue工程化开发

创建工程项目的步骤

1. 安装node

2. 切换镜像源

让安装包的速度更快

3. 安装@vue/cli脚手架

4. 创建项目

切换npm镜像源

npm config set registry https://registry.npm.taobao.org

@vue/cli脚手架

提供一个新的，更加高效的开发环境 文档

1. 在电脑全局安装脚手架

npm i @vue/cli -g

2. 查看@vue/cli版本

vue -V

3. 使用vue脚手架创建一个工程化项目

vue create 项目名
例如
vue create my-app

启动项目

cd my-app  进入项目目录
npm run serve  启动命令

认识Vue工程化目录

• node_modules 项目依赖
• public html模板文件
• src 项目核心代码
  • assets 存放静态资源(css、img)
  • components 存放公共组件
  • views 存放业务组件
  • App.vue 根组件
  • main.js 入口文件(Vue初始化、全局配置)
• .gitignore 让git忽略管理某些文件
• package.json 项目依赖信息、启动命令

快速搭建.vue组件基本结构

vbase   需要修改样式区域的lang="less"
vbase-less

在vscode中配置gitbash

"terminal.integrated.profiles.windows": {
    "git-bash": {
        "path": "D:\\software\\Git\\bin\\bash.exe",
        "args": []
    },
},
"terminal.integrated.defaultProfile.windows": "git-bash",

ES6中的模块化语法

1. 抛出

export default {
        
}

2. 引入

import Divider from './components/Divider.vue'

vue单文件组件

1. .vue组件是如何封装的

• template 结构
• style 样式
• script 功能

2. .vue单文件组件里面的template，只能有一个唯一根节点

3. .vue单文件组件的使用流程

• 封装
• 引入
• 注册
• 调用

组件迁移

• divider 分割线
• msg 消息提示
• my-select

依赖

• 生产依赖 dependencies

项目打包上线后，依旧需要使用的依赖包 - vue.js - axios.js

• 开发依赖 devDependencies

本地开发环境中，才需要使用的依赖包 - less - less-loader

npm命令汇总

npm init   初始化，生成package.json

npm install 包名 --save     安装生产依赖
npm i 包名 -S
npm i 包名

npm install 包名 --save-dev    安装开发依赖
npm i 包名 -D


npm install     自动读取当前目录package.json中的包信息，并依次安装
npm i


npm uninstall 包名    卸载依赖包


npm run 命令      执行项目相关命令

vant组件库

文档