VueCli

一、安装 Vue 项目

• 默认已经搭建好了一套利用 Webpack 管理 vue 项目的结构
• Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统
• Vue CLI 是一个全局安装的 npm 包，提供了终端里的 vue 命令

1、VueCli 介绍

• 介绍-文档：https://cli.vuejs.org/zh/guide/
• 通过 @vue/cli 实现的交互式的项目脚手架
• 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发
• 运行时依赖 (@vue/cli-service)，该依赖：
  • 可升级；
  • 基于 webpack 构建，并带有合理的默认配置；
  • 可以通过项目内的配置文件进行配置；
  • 可以通过插件进行扩展。
• 一个丰富的官方插件集合，集成了前端生态中最好的工具
• 一套完全图形化的创建和管理 Vue.js 项目的用户界面

2、VueCli 安装

# 1、安装vue-cli脚手架，全局安装
// yarn
yarn global add @vue/cli
// npm
npm install -g @vue/cli

# 2、一次性安装3个vue-cli服务
// yarn
yarn global add @vue/cli @vue/cli-service-global @vue/cli-service
// npm
npm install -g @vue/cli @vue/cli-service-global @vue/cli-service
# 如果安装失败，可能是没有权限，`macbook` 命令行前加 `sudo`

# 安装完成后，需要配置环境变量，根据自己的nodejs目录进行配置路径
我的电脑-》右击-》属性-》高级系统设置-》环境变量-》系统变量-》Path-》编辑-》新建(赋值nodejs目录下的node_global路径)
D:\Program Files\nodejs\node_global\

3、VueCli 升级

# yarn
yarn global upgrade --latest @vue/cli
# npm
npm update -g @vue/cli

4、VueCli 查看版本

• vue 命令是 vue-cli 的命令

vue -V 或 vue --version

# VS Code中powershell无法运行cnpm, vue等命令
windows运行-》cmd-》输入powershell-》命令行输入：set-ExecutionPolicy RemoteSigned-》命令行输入：A-》回车-》重启VS code

5、VueCli 卸载

# yarn
yarn global remove @vue/cli
# npm
npm uninstall vue-cli -g

6、VueCli 创建项目

# 1、创建一个项目
# 1.1、www.ouyangke.com 是目录名
vue create www.ouyangke.com

# 2、选择：用vue2，vue3，手动配置。 vue2，vue3除了基本语法， 还有下面2个功能
# 2.1、babel 把es6的语法，转成es5的语法，可以做到兼容
# 2.2、eslint 语法检查，约束你的代码习惯
please pick a preset：
  Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
  Manually select features

# 3、手动选择功能：Choose Vue version、Babel、CSS Pre-processors
Check the features needed for your project:
  Choose Vue version                  // 版本
  Babel                               // 把es6的语法，转成es5的语法，可以做到兼容
  TypeScript                          // 由微软开发的自由和开源的编程语言，是 JavaScript 的一个超集，支持es6语法
  Progressive Web App (PWA) Support   // Web APP开发
  Router                              // 路由
  Vuex                                // 状态管理器
  CSS Pre-processors                  // css预处理器：三种流行的CSS预处理器：Sass、LESS 和 Stylus
  Linter / Formatter                  // 代码语法检查器(eslint)
  Unit Testing                        // 单元测试
  E2E Testing                         // e2e(端到端)测试

# 4、选择版本：3.x
Choose a version of Vue.js that you want to start the project with:
  2.x
  3.x

# 5、选择css预处理器版本：dart-sass，官方目前主力推dart-sass
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass)
  Sass/Scss (with node-sass)
  Less
  Stylus

# 6、配置文件：In package.json
Where do you prefer placing config for Babel, ESlint, etc.?
  In dedicated config files   // 独立配置文件
  In package.json             // 放在package.json里

# 7、是否保持此项目配置：保存的话，起个名字
Save this as a preset for future projects?
  y   // 保存
  n   // 不保存

7、运行项目

# yarn
yarn serve
# npm
npm run serve

---

二、目录结构

目录名	作用
node_modules	npm 加载的项目依赖模块
public	公共资源目录
src	开发目录
src/main.js	主入口文件
src/App.vue	网站首页文件
src/assete	存放静态资源：css、js、字体、图片、资源
src/components	存放通用模块组件
src/router	存放路由设置文件
src/views
babel.config.js
package.json
package-lock.json
README.md
----------------------	----------------------------------
static	静态资源目录，如图片、字体等
dist	打包后会生成该的目录
build	项目构建(webpack)相关代码

1、Package.json 文件属性说明

参数	描述
name	包名
version	包的版本号
description	包的描述。
main	main 字段指定了程序的主入口文件，require('moduleName') 就会加载这个文件。这个字段的默认值是模块根目录下面的 index.js
keywords	关键字
author	包的作者姓名
scripts	定义的脚本，脚本可以用 vue-cli 脚手架、webpack-cli 脚手架、或者自己写命令
license	代码的许可证，[MIT](https://opensource.org/licenses/MIT) 麻省理工许可证、[ISC](https://opensource.org/licenses/ISC) 开放源代码许可证
homepage	包的官网 url
contributors	包的其他贡献者姓名
dependencies	依赖包列表。运行时的依赖，发布后，即生产环境下还需要用的模块。如果依赖包没有安装，npm 会自动将依赖包安装在 node_module 目录下。
devDependencies	开发时的依赖。里面的模块是开发时用的，发布时用不到它，比如项目中使用的 gulp ，压缩 css、js 的模块
repository	包代码存放的地方的类型，可以是 git 或 svn，git 可在 Github 上

// package.json文件中版本号的说明，安装的时候代表不同的含义：
"5.0.3"   表示安装指定的5.0.3版本
"~5.0.3"  表示安装5.0.X中最新的版本
"^5.0.3"  表示安装5.X.X中最新的版本
// 因为前端版本太随意了，所以要指定版本，可能1个小版本，就跟之前的不兼容了

{
    "name": "ouyangke",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
    },
    "dependencies": {
        "core-js": "^3.6.5",
        "vue": "^3.0.0",
        "vue-router": "^4.0.0-0",
        "vuex": "^4.0.0-0"
    },
    "devDependencies": {
        "@vue/cli-plugin-babel": "~4.5.0",
        "@vue/cli-plugin-eslint": "~4.5.0",
        "@vue/cli-plugin-router": "~4.5.0",
        "@vue/cli-plugin-vuex": "~4.5.0",
        "@vue/cli-service": "~4.5.0",
        "@vue/compiler-sfc": "^3.0.0",
        "@vue/eslint-config-airbnb": "^5.0.2",
        "babel-eslint": "^10.1.0",
        "eslint": "^6.7.2",
        "eslint-plugin-import": "^2.20.2",
        "eslint-plugin-vue": "^7.0.0",
        "lint-staged": "^9.5.0",
        "sass": "^1.26.5",
        "sass-loader": "^8.0.2"
    },
    "gitHooks": {
        "pre-commit": "lint-staged"
    },
    "lint-staged": {
        "*.{js,jsx,vue}": [
            "vue-cli-service lint",
            "git add"
        ]
    }
}

2、main.js 入口文件

• 项目中所有的页面都会加载 main.js，有三个作用：
  • 1.实例化 Vue
  • 2.放置项目中经常会用到的插件和 CSS 样式。例如： 网络请求插件:axios 和 vue-resource、图片懒加载插件：vue-lazyload
  • 3.存储全局变量，例如（用于的基本信息）

# 1、引入 vue 模块
import { createApp } from 'vue'
# 2、引入 App.vue 文件
import App from './App.vue'
# 3、引入 路由 模块
import router from './router'

# 4、createApp创建应用
# 4.1、(App) 参数，就是App.vue文件中的export default(默认导出的)
# 4.2、use() 使用Vue.js插件
# 4.3、mount() 组件挂载在DOM的ID元素上
createApp(App).use(router).mount('#app')

# 还有一些其他的链式方法：component（组件）、config（配置）、directive（指令）、mixin（混入）、provide（搭配Inject）、unmount（卸载）

---

三、配置文件

• vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载
• 根目录 vue.config.js 文件，默认没有该文件，可自行添加
• 手册：https://cli.vuejs.org/zh/config/
• 可以使用 vue 配置、vuecli 配置、引入 webpack 配置

---

四、目录脑图