@vue/cli 项目初始化起手式

本文档对应的代码库： https://github.com/Lzq811/VueCli3.x-project/tree/init-project-%40vue/cli 对应其中的 init-project-@vue/cli 分支

参考VUECLI官方文档：https://cli.vuejs.org/zh/guide/

@vue/cli + element + axios+ vuex + ecahrts + 配置运行和打包环境

安装脚手架

npm install -g @vue/cli
# OR
yarn global add @vue/cli
# 检查是否安装正确
vue --version # 结果如下图则表示安装成功

install ok.png

提示： 如果现实 vue 命令不存在则是要为vue配置全局环境变量, 配置方法参考：https://www.jianshu.com/p/50d7d91ba674

升级脚手架

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

创建一个项目

# 可以使用 vue create --help 来按需配置，也可以用下面的命令快速生成项目
vue create web-dev-standard #  web-dev-standard是你想要创建项目的名称
# 选择是否是有 淘宝 镜像
# 选择vue的版本
# 选择 使用 Yarn 还是 npm 做依赖包管理工具
# 等待下载完成之后
cd .\web-dev-standard 进入 项目 文件夹
yarn serve # 启动项目 用serve 不习惯， 改成 yarn start 来启动项目, 只需在 package.json 文件的 script 里添加对应的指令即可， 参考下面的图片

# 访问 http://localhost:8080 默认监听 8080 端口

create.png

yarnornpm.png

start.png

open.png

yarn start.png

open ok.png

初始化目录如下图

dir path ok.png

配置时无需 Eject

通过 vue create 创建的项目无需额外的配置就已经可以跑起来了。插件的设计也是可以相互共存的，所以绝大多数情况下，你只需要在交互式命令提示中选取需要的功能即可。

不过我们也知道满足每一个需求是不太可能的，而且一个项目的需求也会不断改变。通过 Vue CLI 创建的项目让你无需 eject 就能够配置工具的几乎每个角落

使用 less 、stylus、 scss 等css预编译器

less 、stylus、 scss 等都是非常常用的 css 预编译器， 无需过分对比哪个更好， 都可以放心使用
element-ui是使用了 scss ，如果我们也使用scss就可以无缝的修改 element-ui定义好的 变量
但是个人偏爱 less, 下面就附上 less 的使用方法

参考vue cli的使用方法：https://cli.vuejs.org/zh/guide/css.html

1. 安装

npm install less less-loader --save
# OR
yarn add less less-loader --save

2. 使用之前的配置 vue.config.js

css: {
    loaderOptions: {
      less: {}
    }
  }

less-loader.png

3. 使用示例

.axios-demo-page {
  border: 1px solid red;
  .title {
    font-size: 40px;
    font-weight: 700;
    color: yellowgreen;
  }
}

4. 修改默认监听的端口号
   在vue.config.js 文件里添加, 参考文档 https://cli.vuejs.org/zh/config/#devserver
   和 webpack 的配置文档： https://webpack.js.org/configuration/dev-server/

devServer: {
    port: 3030
  }

使用 element-ui

element-ui官方地址：https://element.eleme.cn/#/zh-CN/component/installation

1. 安装 element-ui 依赖包

npm i element-ui -S
#OR
yarn add element-ui -S

2. 完整引入 Element
   在 main.js 中写入以下内容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

3. 按需引入
   参考文档： https://element.eleme.cn/#/zh-CN/component/quickstart

4. 全局配置
   完整引入 Element：

import Vue from 'vue';
import Element from 'element-ui';
Vue.use(Element, { size: 'small', zIndex: 3000 });

按照以上设置，项目中所有拥有 size 属性的组件的默认尺寸均为 'small'，弹框的初始 z-index 为 3000。

安装vue-router

参考vue-router网站：https://router.vuejs.org/zh/

1. 安装

npm install vue-router
#OR
yarn add vue-router

2. 引用
   在src目录下新建文件夹 router 用来做 路由 的配置
   在main.js文件里写入下面代码

import router from './router'  // src/router/index.js

new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

此时启动如果报错，参考下图解决

router-error1.png

3. 使用示例

按照实际项目开发，修改初始化目录，一般逻辑如下

router dir path.png

具体参考为本文档同步的 github 项目代码

Echarts 图表

参考文档： https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

也可以使用 echarts-for-vue: https://gitee.com/mgb/echarts-for-vue

1. 安装echarts官方版本

npm install echarts --save
# OR
yarn add echarts --save

2. 全局引用
   mian.js文件里添加

import * as echarts from 'echarts'

Vue.prototype.echarts = echarts // 把echarts放在 Vue 的原型上，以便全局都可以访问

3. 使用示例

手动修改路由地址访问demo示例： http://localhost:8080/demo/echartsdemo

echart view.png

axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

中文文档： http://www.axios-js.com/

1.安装

npm install axios
#OR
yarn add axios

2. 引入 (如需进一步封装，请参考步骤 4）

在 src 目录下新建文件夹 api 该目录用来放axios请求的相关内容
api/index.js 是aixos做ajax的人口文件
api/http 是封装 axios 的请求响应拦截相关的配置内容
api/demo 是项目正常开发使用的 demo 功能相关的 接口 内容
如此设计目录会更方便开发维护

import axios.png

在 main.js 文件里面 引入 api/http 并把它指向到 Vue 的原型上

import axios from './api/http'

Vue.prototype.axios = axios
就可以全局 this.axios 访问 axios 了

3. 使用示例

发送给服务器的请求内容

axios demo.png

下面是官方文档的示例

axios demo.png

/** 4. 在 axios 的基础上进一步封装
封装思路:
(1). 统一处理请求响应拦截，把请求api安装功能分成不同的模块，这个思路与步骤2相同
(2). 由于axios的response是Promise,可以进行二次封装，从而返回的不再是默认Promise而是我们再次封装的response 主体，封装的 response 依然是一个 Promise
(3).统一处理请求异常
(4).使用 aysnc await 解决异步带来的问题 **/

VUEX

参考官方文档： https://vuex.vuejs.org/zh/

1. 安装

npm install vuex --save
#OR
yarn add vuex

2. 引用
   在 src 目录下 新建 store 文件夹，用来放 vuex state 代码
   在 src/store 目录下 新建 index.js 和 mutation-types.js

   
   
   store path.png

在 mian.js 中全局引入 store

#main.js
import store from '@/store'

# 在Vue实例里面 把 store 添加进去
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: ''
})

3. 使用示例

# src/store/index.js 写入如下代码


/*
* vuex 状态管理的 入口 文件
* 我们可以根据项目的实际功能或者需求 把 state 分开管理
*/

import Vue from 'vue'
import Vuex from 'vuex'

import { SET_COUNT_SHORT, ACT_COUNT_SHORT } from './mutation-types'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0 // 初始化 count 状态值
  },

  /* count 状态 要改变 必须触发 moutations 的动作 commit 是触发 mutations 的语法糖 */
  mutations: {
    /* 添加一个 count plus mutations 用来模拟 同步更新 count 状态 */
    setCountPlus (state, val) {
      state.count += val
    },

    /* 添加一个 count short mutations 用来模拟 异步更新 count 状态 */
//  使用常量替代 Mutation 事件类型, 但不是必须这么用
    [SET_COUNT_SHORT] (state, val) {
      state.count -= val
    }
  },

  /* 异步 修改 count 状态， 但这里的异步只是 语法糖， 
    最终还是要 触发 mutations 动作才能完成 count 状态的更新
    触发 actions 的语法糖是 dispath
   */
  actions: {
    //  使用常量替代 Mutation 事件类型, 但不是必须这么用
    [ACT_COUNT_SHORT] (context, val) {
      context.commit('SET_COUNT_SHORT', val)
    }
  }
})

#  src/store/mutation-types.js 写入如下代码

/* 使用常量替代 Mutation 事件类型, 但不是必须这么用 */
export const SET_COUNT_SHORT = 'SET_COUNT_SHORT'
export const ACT_COUNT_SHORT = 'ACT_COUNT_SHORT'

调用 在auth组件

# 可以在标签里面直接写入
{{this.$store.state.count}}

# 也可使用 computed 一下
{{count}}
computed: {
  count () {
      return this.$store.state.count
  }
}

修改 在 login 组件

# 触发 mutations 的方法同步修改
this.$store.commit('setCountPlus', 8)

# 触发 actions 的方法异步修改
this.$store.dispatch('ACT_COUNT_SHORT', 6)

分环境运行和打包

我用过三种： cross-env & dotenv & 和@vue/cli配置好的环境变量
npm cross-env 网站: https://www.npmjs.com/package/cross-env
npm dotenv 网站： https://www.npmjs.com/package/dotenv
vue cli 环境变量： https://cli.vuejs.org/zh/guide/mode-and-env.html

cross env npm.png

dotenv npm.png

vueclienv.png

我们这里就近水楼台使用 vue cli 封装好的

1. 在根目录下新建 .env .env.test .env.prod 分别代表着开发 测试 生产 环境对应的后台地址

   
   
   env path.png

2. 在对应的 env 文件里面 写入对应的 环境变量 地址

  VUE_APP_URL = 'http://0.0.0.0:8080' # 你的对应环境的后台地址

env set detail.png

3. 修改启动配置 package.json

"scripts": {
    "start": "vue-cli-service serve --mode test",
    "start--test": "vue-cli-service serve --mode test",
    "start--dev": "vue-cli-service serve --mode dev",
    "start--prod": "vue-cli-service serve --mode prod",
    "build": "vue-cli-service build --mode prod",
    "build--test": "vue-cli-service build --mode test",
    "build--prod": "vue-cli-service build --mode prod",
    "lint": "vue-cli-service lint"
  }

修改之前.png

修改之后.png

6. 调取环境变量

# 在api的入口文件index.js里面 把写死的 base 改成 动态的
  process.env.VUE_APP_URL

base url.png

5. 启动打包指令

# 启动
yarn start # 默认启动测试
yarn start--test
yarn start--prod

# 打包
yarn build # 按上面的改造 默认打包 prod
yarn build--test
yarn build--prod

下图能正常输出对应变量值， 就是配置成功了。

console env value.png