vue项目的创建和依赖库的安装

目录

 

1 前端项目初始化步骤

2 通过vue-ui的方式创建项目

3 通过vue-ui的添加插件

3.1 安装Element-UI 组件库

3.2 安装axios 库

3.3 安装less依赖

3.4 导入第三方图标库

3.5 安装Nprogress运行依赖

3.6 安装vue-table-with-tree-grid运行依赖及应用

3.7 安装vue-quill-editor富文本编辑器 运行依赖及应用

3.8 安装lodash 运行依赖及应用

3.9 安装echarts运行依赖及应用

---

 

1 前端项目初始化步骤

1. 安装VUE脚手架
2. 通过Vue脚手架创建项目
3. 配置Vue路由
4. 配置Element-UI组件
5. 安装配置axios库

 

 

2 通过vue-ui的方式创建项目

• 在命令行中输入: $vue ui

• 进入ui页面

 

• 选择手动设置

• 功能配置

• 项目配置

3 通过vue-ui的添加插件

3.1 安装Element-UI 组件库

• 打开项目仪表盘

• 添加插件

• 查找插件，选择插件，然后点击安装按钮

• 配置插件

3.2 安装axios 库

• 添加项目依赖

• 查找依赖，选择运行依赖axios

• 安装完成

3.3 安装less依赖

当项目使用less样式时，需要安装开发依赖less-load和less

（1）less-load：开发依赖

（2）less：开发依赖

3.4 导入第三方图标库

• 下载地址fonticon图标

链接：https://pan.baidu.com/s/1CBZ4FsI74nOEzYPodP_7vA 
提取码：9g1e 

• 导入阿里的图标库

• 使用图标

• 应用效果

3.5 安装Nprogress运行依赖

NProgress是页面跳转是出现在浏览器顶部的进度条
官网：http://ricostacruz.com/nprogress/
github：https://github.com/rstacruz/nprogress

• 安装依赖

• 使用

（1）导入

// 当如nprogress 包对应的js和css 用于加载进度条
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

（2）在axios请求和响应中调用

// 给请求头添加Authorization
axios.interceptors.request.use(config => {
  // 展示进度条
  NProgress.start()
  config.headers.Authorization = window.sessionStorage.getItem('token')
  return config
})

// 在response拦截器中，隐藏进度条
axios.interceptors.response.use(config => {
  NProgress.done()
  return config
})

3.6 安装vue-table-with-tree-grid运行依赖及应用

• 下载

• 引入插件，在main.js中全局引用

import TreeTable from 'vue-table-with-tree-grid'

Vue.component('tree-table', TreeTable)

• 使用插件

    <!-- 表格 -->
      <tree-table
        class="treeTable"
        :data="cateList"
        :columns="columns"
        :expand-type="false"
        :selection-type="false"
        show-index
        index-text="#"
        border
      >
        <!-- 是否卓有成效 -->
        <template slot="isOk" slot-scope="scope">
          <i
            class="el-icon-success"
            style="color: lightgreen;"
            v-if="scope.row.cat_deleted === false"
          ></i>
          <i class="el-icon-error" style="color: red;" v-else></i>
        </template>

        <!-- 排序 -->
        <template slot="order" slot-scope="scope">
          <el-tag v-if="scope.row.cat_level === 0" size="mini">一级</el-tag>
          <el-tag type="success" v-else-if="scope.row.cat_level === 1" size="mini">二级</el-tag>
          <el-tag type="warning" v-else size="mini">三级</el-tag>
        </template>

        <!-- 操作 -->
        <template slot="opt" slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="showEditDialog(scope.row)"
          >编辑</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="delCate(scope.row)">删除</el-button>
        </template>
      </tree-table>

• 运行效果

 

3.7 安装vue-quill-editor富文本编辑器 运行依赖及应用

• 下载

• 引入插件，在main.js中全局引用

// 导入富文本编辑器
import VueQuillEditor from 'vue-quill-editor'

// require styles 导入富文本编辑器的样式文件
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

// 注册富文本编辑器
Vue.use(VueQuillEditor)

• 使用插件

 <quill-editor v-model="addForm.goods_introduce"></quill-editor>

 

3.8 安装lodash 运行依赖及应用

https://www.jianshu.com/p/907e8a0ee5d7

• 下载

• 引用插件

<script>
import _ from 'lodash'
...
...
</script>

• 使用插件

深拷贝
const form = _.cloneDeep(this.addForm)

3.9 安装echarts运行依赖及应用

• 下载

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

• 使用插件：4步

 

 

• 显示效果