02.Vue2 CLI

Vue CLI 基础

什么是 Vue CLI？

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，称为脚手架工具。
使用 Vue CLI 具有以下优点：

• 统一项目的架构风格
• 初始化配置项目依赖
• 提供单文件组件

安装

npm install -g @vue/cli
# 或者
cnpm install -g @vue/cli
# Mac如果出现权限错误，需要sudo

# 可能报错，按照报错安装需要的
cnpm install -g @vue/cli-service
cnpm install -g @vue/cli-plugin-babel
cnpm install -g @vue/cli-plugin-eslint

查看版本：

vue --version
# 升级版本
npm update –g @vue/cli

项目搭建

vue create VueCLIDemo
# 可能需要sudo

• 选择 Preset：
• 选择 Manually, 上下选择，按空格键选定自己需要的插件功能，
• 完成后回车，后面是一系列你选择的插件的相关设置选择，
• 目录结构

• 运行：npm run serve，点击链接访问

Vue CLI 目录结构

├── node_modules  node库依赖
├── public 
│ ├── favicon.ico: 页签图标 
│ └── index.html: 主页面 
├── src 
│ ├── assets: 存放静态资源 
│ │ └── logo.png 
│ │── component: 存放组件 
│ │ └── HelloWorld.vue 
│ │── App.vue: 汇总所有组件 
│ │── main.js: 入口文件 
├── .gitignore: git 版本管制忽略的配置 
├── babel.config.js: babel 的配置文件 
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件 
├── package-lock.json：包版本控制文件
├── 配置vue-config-js

新的 vue 项目，拉取后执行 npm -i 将依赖库生成 node_modules 目录

vue-config-js 配置

1. 使用 vue inspect > output.js 可以查看到 Vue 脚手架的默认配置。
2. 使用 vue.config.js 可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh

关于不同版本的 Vue

1. vue.js 与 vue.runtime.xxx.js 的区别：
   1. vue.js 是完整版的 Vue，包含：核心功能 + 模板解析器。
   2. vue.runtime.xxx.js 是运行版的 Vue，只包含：核心功能；没有模板解析器。
2. 因为 vue.runtime.xxx.js 没有模板解析器，所以不能使用 template 这个配置项，需要使用 render 函数接收到的 createElement 函数去指定具体内容。

render 函数

1. render：不包含模板解析器，减少体积，不用写 template；render 方法的实质就是生成 template 模板；
2. 通过调用一个方法来生成，而这个方法是通过 render 方法的参数传递给它的；
3. 这个方法有三个参数，分别提供标签名，标签相关属性，标签内部的 html 内容
4. 通过这三个参数，可以生成一个完整的模板。

render 函数是什么？

简单的说，在 vue 中我们使用模板 HTML 语法组建页面，使用 render 函数我们可以用 js 语言来构建 DOM。

因为 vue 是虚拟 DOM，所以在拿到 template 模板时也要转译成 VNode 函数，而用 render 函数构建 DOM 时，vue 就免去了转译的过程。

当使用 render 函数描述虚拟 DOM 时，vue 提供一个函数，这个函数是就构建虚拟 DOM 所需要的工具。官网起名 createElement。还有约定的简写 h,将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例，实际上也是 JSX 所要求的。

render 函数怎么用？

render:(h) => {
    return h('div',{　//给div绑定value属性
       props: {
           value:''
       },　
       //给div绑定样式
       style:{
         width:'30px'                                                                                   
       },　
       //给div绑定点击事件　　
       on: {
           click: () => {
               console.log('点击事件')
           }
       },
   })
}

Vue 跨域问题

见：[[跨域问题]]

不同环境 api 切换

.env process.env.NODE_ENV

• 在 src 同级目录下创建 .env.development 和 .env.production
• 配置文件的配置内容 ` .env.production ` 这个文件配置的是生产环境的变量，放置线上访问的路径

NODE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_API_URL = 'http://xxx.xxx.xxx.xx:10001/api/'

• .env.development 这个文件配置的是生产环境的变量，放置线下访问的路径

NODE_ENV = 'development'  // 模式
VUE_APP_MODE = 'development'  // 通过"VUE_APP_MODE"变量来区分环境
VUE_APP_API_URL = 'http://10.****:8008/api/' // api地址

• 修改 vue.config.js - 可不修改

module.exports = {
    // 部署应用时的基本 URL
    // 部署生产环境和开发环境下的URL：可对当前环境进行区分，baseUrl 从 Vue CLI 3.3 起已弃用，要使用publicPath
    // 基本路径,相对路径  或其他别名
    publicPath: process.env.NODE_ENV === "production" ? "./" : "./",
    // 输出文件目录
    outputDir: 'dist',
    // ...
}

• 修改 package.json 文件 - 可不修改 有相应的可不修改 vue 会自动标识 development production

"dev": "vue-cli-service serve --mode development",
"test": "vue-cli-service serve --mode production",

• 在 request.js 中进行使用

axios.defaults.baseURL = process.env.VUE_APP_BASE_URL
// 或
const service = axios.create({
    // axios中请求配置有baseURL选项，表示请求URL公共部分
    baseURL: process.env.VUE_APP_BASE_URL,
    // 超时
    timeout: 100000
})

注意： Windows 环境下，不能创建 .env.development 文件。

cross-env

cross-env 是什么？

cross-env：运行跨平台设置和使用环境变量的脚本

出现原因

当您使用 NODE_ENV=production, 来设置环境变量时，大多数 Windows 命令提示将会阻塞 (报错)。 （异常是 Windows 上的 Bash，它使用本机 Bash。）同样，Windows 和 POSIX 命令如何使用环境变量也有区别。 使用 POSIX，您可以使用：$ENV_VAR 和使用 ％ENV_VAR％ 的 Windows。

Windows 不支持 NODE_ENV=development 的设置方式。

解决： cross-env 使得您可以使用单个命令，而不必担心为平台正确设置或使用环境变量。 只要在 POSIX 系统上运行就可以设置好，而 cross-env 将会正确地设置它。 说人话: 这个迷你的包 (cross-env) 能够提供一个设置环境变量的 scripts，让你能够以 unix 方式设置环境变量，然后在 windows 上也能兼容运行。

安装

npm install --save-dev cross-env

使用：

{
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
  }
}

NODE_ENV 环境变量将由 cross-env 设置

打印 process.env.NODE_ENV === 'production'

打包部署

打包

打包就是将 Vue CLI 项目编译为浏览器可识别的文件。

npm run build

打包完成，生成 dist 目录。

部署

部署指的是将 Vue 项目 dist 目录部署到服务器上。

安装静态文件服务器：

npm install –g serve

在 dist 下通过 serve 命令部署：

cd dist

serve

访问链接

Node.js express 部署 Vue

1. 构建 Vue 项目到 dist: npm run build
2. 创建 Node.js 服务器
   1. 在某个目录创建名为 server 的目录，并进入到该目录
   2. 初始化 npm: npm init -y
   3. 使用以下命令安装 express 框架：npm install express --save
   4. 在 server 文件夹中创建一个 index.js。
   5. 在 index.js 文件中，输入以下代码以创建一个简单的 HTTP 服务器：

const express = require('express')
const app = express()

app.use(express.static('dist'))

app.listen(12345, () => {
    console.log('Listening on port 12345')
})

1. 并将 “dist” 文件夹中的所有文件作为静态文件提供。我们可以在浏览器中访问这个服务器，并查看我们的 Vue.js 项目。
2. 启动服务器：node server/index.js
3. 访问

注意

权限问题

Error: EACCES: permission denied

1. sudo xxx
2. sudo chown -R <username> 'path-to-your-project-folder'

新 clone 的项目 npm run serve 报错

解决：执行 npm i 命令安装依赖

cnpm install -g @vue/cli
cnpm install -g @vue/cli-service
cnpm install -g @vue/cli-plugin-babel
cnpm install -g @vue/cli-plugin-eslint