当前位置:   article > 正文

vue项目的创建和依赖库的安装_vue开发依赖包创建

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 导入第三方图标库

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

  • 导入阿里的图标库

  • 使用图标

  • 应用效果

3.5 安装Nprogress运行依赖

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

  • 安装依赖

  • 使用

(1)导入

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

(2)在axios请求和响应中调用

  1. // 给请求头添加Authorization
  2. axios.interceptors.request.use(config => {
  3. // 展示进度条
  4. NProgress.start()
  5. config.headers.Authorization = window.sessionStorage.getItem('token')
  6. return config
  7. })
  8. // 在response拦截器中,隐藏进度条
  9. axios.interceptors.response.use(config => {
  10. NProgress.done()
  11. return config
  12. })

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

  • 下载

  • 引入插件,在main.js中全局引用
  1. import TreeTable from 'vue-table-with-tree-grid'
  2. 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中全局引用
  1. // 导入富文本编辑器
  2. import VueQuillEditor from 'vue-quill-editor'
  3. // require styles 导入富文本编辑器的样式文件
  4. import 'quill/dist/quill.core.css'
  5. import 'quill/dist/quill.snow.css'
  6. import 'quill/dist/quill.bubble.css'
  7. // 注册富文本编辑器
  8. Vue.use(VueQuillEditor)
  • 使用插件
 <quill-editor v-model="addForm.goods_introduce"></quill-editor>

 

3.8 安装lodash 运行依赖及应用

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

  • 下载

  • 引用插件
  1. <script>
  2. import _ from 'lodash'
  3. ...
  4. ...
  5. </script>
  • 使用插件
  1. 深拷贝
  2. 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步

 

 

  • 显示效果

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/784851
推荐阅读
相关标签
  

闽ICP备14008679号