Vue项目构建指南（一）

主要内容包括：使用vue-cli创建项目，如何引入echarts，如何引入elementUI，如何引入axios，如何引入全局css文件
vue版本：

vue版本：2.x
vue-cli版本：3.x
vue—router：4.x

创建项目

使用vue-cli3（也可以使用vue-cli2）创建一个基本的vue项目框架，具体步骤如下：

1. 执行以下命令

vue-cli3中的命令是：
vue create 项目名（项目名不能包含大写字母） 
vue-cli2中的命令是：
vue init webpack 项目名（项目名不能包含大写字母）  

2. 选择自定义
   
3. 按照下图进行选择（空格键是选中或取消）
   
4. 版本选择2.x
   
5. 其他的选择是

使用less作为css的预处理器

6. 项目创建完成

项目搭建完成后的代码删除操作

这些东西都是没啥用的

1. 修改App.vue中的代码为

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style lang="less">
</style>

2. 删除 components/HelloWorld.vue 这个文件

删除 views/About.vue 和 views/Home.vue 这两个文件

3. 修改router/index.js

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   
   Vue.use(VueRouter)
   
   const routes = [
   ]
   
   const router = new VueRouter({
     routes
   })
   
   export default router
   

项目基本配置

在项目根目录下创建vue.config.js文件

在文件中添加代码：

// 使用vue-cli创建出来的vue工程, Webpack的配置是被隐藏起来了的
// 如果想覆盖Webpack中的默认配置,需要在项目的根路径下增加vue.config.js文件
module.exports = {
    devServer: {
        port: 8999, // 端口号的配置
        open: true // 自动打开浏览器
    }
}

如何引入echarts

方式一：npm方式引入

# 第一步
npm install echarts --save
# 或者
npm install echarts -S
# 第二步
# 在src/main.js 中全局引入 echarts并挂载到vue的原型对象上
# 添加下面两行代码

import * as echarts from 'echarts';
# 不可以使用 import echarts from "echarts";
# 否则会报错  "export ‘default’ (imported as ‘echarts’) was not found in ‘echarts’
# 这是echarts5.0之后做的更改
# 参考链接：https://www.jianshu.com/p/a5ebd1deed6c
# 参考链接 https://blog.csdn.net/weixin_43972437/article/details/111475106
Vue.prototype.$echarts = echarts;

在其他组件中使用
this.$echarts

方式二：先下载echarts.min.js文件，再引入，此处不作介绍

echarts 3D的使用

//第一步 命令行中执行下面的命令
npm install echarts-gl
//第二步 在main.js中添加下面两行代码
import echartsGL from 'echarts-gl'
Vue.prototype.$echartsGL = echartsGL
// 这就OK了 其他地方的代码不需要改
//不需要把this.$echarts改为this.$echartsGL(前提是已经引入了echarts)

如何引入axios

npm install axios

在 src/main.js 文件中配置 axios 并且挂载到Vue的原型对象上

import axios from 'axios'

axios.defaults.baseURL = 'http://127.0.0.1:8888/api/'
// baseURL是可以随便起的，只要使用的时候使用自己使用的名称就好了

// 将axios挂载到Vue的原型对象上
Vue.prototype.$http = axios  
// $http是可以随便起的，只要使用的时候使用自己使用的名称就好了
在其他组件中使用this.$http

如何引入elementUI

（以下官网用法）

npm i element-ui -S

在 src/main.js 文件中配置elementUI

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';//需要注意的是，样式文件需要单独引入。
Vue.use(ElementUI);

如何引入全局CSS文件

参考链接：https://blog.csdn.net/weixin_41767649/article/details/82797801

<style src="@/style/reset.css"  scoped></style>