环境搭建:Windows 10 专业版 + Node.js + NPM + Google Chrome + $npm i -g @vue/cli </p>
项目创建:#vue create demo + $cd demo + $yarn serve + $vue ui </p>
项目结构
├── node_modules # 项目依赖包目录
├── public
│ ├── favicon.ico # ico 图标
│ └── index.html # 首页模板
├── src
│ ├── assets # 样式图片目录
│ ├── components # 组件目录
│ ├── views # 页面目录
│ ├── App.vue # 父组件
│ ├── main.js # 入口文件
│ ├── router.js # 路由配置文件
│ └── store.js # vuex 状态管理文件
├── .gitignore # git 忽略文件
├── .postcssrc.js # postcss 配置文件
├── babel.config.js # babel 配置文件
├── package.json # 包管理文件
└── yarn.lock # yarn 依赖信息文件
(1)Vue CLI 3 提供图形化界面, 提供插件,Vue CLI 有几个独立的部分组成:
CLI 是一个全局安装的 npm 包, 提供终端的 Vue 命令.
CLI 服务是一个开发环境依赖, 一个 npm 包, 局部安装在每个 @vue/cli 创建的项目中, 包含加载其他 CLI 插件的核心服务, 一个优化过的内部 webpack 配置, 项目内部的 vu-cli-service 命令, 提供 serve,build 和 Inspect 命令.
CLI 插件是向你的 Vue 项目提供可选的功能的 npm 包.
(1)起步
起步: $yarn global add@vue/cli $vue create vuecli $vue ui
(1)-1: 快速原型开发, 使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发, 先 $npm install -g @vue/cli-service-global
(1)-2:vue serve 命令可以在零配置下为.js 或.vue 文件启动一个服务器 $serve -o; 打开浏览器 $serve -c; 将本地 URL 复制到剪切板 $serve -h; 帮助 例子:$vue serve hello.vue
(1)-3:vue build $build -t; 构建目标 $build -n; 库的名字 $build -d; 输出目录 $build -h; 输出用法信息 例子:$vue vue build hello.vue
(2)插件和 Preset
(2)-1: 每个 CLI 插件都会包含一个 (用于创建文件的) 生成器和一个 (用来调整 webpack 核心配置和注入命令的) 运行时插件
$vue add @vue/eslint
(2)-2:Vue CLI Preset 是一个包含新项目所需要预定义选项的插件的 JSON 对象, 让用户无需在命令提示中选择它们.
(3)CLI 服务:
(1)vue-cli-service serve –open 在浏览器启动时打开浏览器
(2)vue-cli-service serve –copy 在浏览器启东时讲 URL 复制到剪切板
(3)vue-cli-service serve –mode 指定环境模式(默认值 development)
(4)vue-cli-service serve –host 指定 host
(5)vue-cli-service build –mode 指定环境模式
(2) Vue Devtools