小白分享：基于vue-cli从零搭建一个Vue项目-Vcharts

最新推荐文章于 2024-03-17 15:57:57 发布
最新推荐文章于 2024-03-17 15:57:57 发布
阅读量352 收藏 1
点赞数
分类专栏： 前端技术 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shichen2010/article/details/106645529
版权

导读：既然有兴趣，就手动搭建一个vue应用吧。所需相关环境依赖，项目中跟java web开发一样，需要引入依赖相关库（类似jar包）。譬如（UI组件-Element UI、请求路由-Vue Router、图形报表-VCharts、视图模板引擎-jade、样式组件-scss等等），透过这次搭建认识到如何通过npm安装依赖所需依赖库，鉴于此，留此笔记。

文章目录

先睹为快
先睹为快

1、环境准备

  • IDE ：Visual Studio Code 开发工具，类似Idea
  • NPM：项目构建工具
  • nodeJS：基于 Chrome V8 引擎的 JavaScript运行环境，类似JVM

2、新建项目

这里我们可以基于vue-cli工具，基于可视化界面创建项目。

  • 1.安装vue-cli
npm install -g @vue/cli
  • 2.验证版本
vue --version

console：

@vue/cli 4.4.1
  • 更新
npm update -g @vue/cli
  • 3.基于UI新建项目
vue ui

输出

  • 4.配置项目

浏览器访问：http://localhost:8000/project/select
填写项目

vue-cli：https://cli.vuejs.org/

在这里插入图片描述

配置如上

在这里插入图片描述

生成目录如下
在这里插入图片描述

3、运行项目

选择运行

在这里插入图片描述

4、安装依赖

4.1、element ui

UI组件库，进入项目根目录安装

npm i v-charts echarts -S

【项目主页】：https://element.eleme.cn/#/zh-CN/component/installation

4.2、vue router

路由组件，进入项目根目录安装

npm install vue-router

【项目主页】：https://router.vuejs.org/installation.html

4.3、v-charts

可视化统计报表，进入项目根目录安装

npm i v-charts echarts -S
+ echarts@4.8.0
+ v-charts@1.19.0

输出如下意味安装成功：

+ echarts@4.8.0
+ v-charts@1.19.0

项目主页：https://v-charts.js.org/#/

4.4、scss

一个编写样式（CSS）的样式库，进入项目根目录安装

npm install sass-loader node-sass webpack --save-dev
npm install style-loader css-loader --save-dev

4.5、jade

Jade is a high performance template engine heavily influenced by Haml and implemented with JavaScript for node and browsers. For bug reports, feature requests and questions, open an issue. For discussion join the chat room.

进入项目根目录安装

npm install jade jade-loader -D

【项目主页】：https://www.npmjs.com/package/jade

5、代码编写

5.1、VCharts

VCharts是使用Vue语言基于Echarts的二次封装。

src/page/charts下创建index.vue

代码如下：

<template>
    <div>
        <el-row :gutter="24">
            <el-col :span="12">
                <el-panel>
                    <el-divider content-position="left">市场份额全国分布情况</el-divider>
                    <ve-map :data="provinceData" :events="provinceChartEvents"/>
                </el-panel>
            </el-col>
            <el-col :span="12">
                <el-panel>
                    <el-divider content-position="left">市场份额全国分布情况</el-divider>
                    <ve-waterfall :data="provinceData"/>
                </el-panel>
            </el-col>
        </el-row>
        <el-row :gutter="24">
            <el-col :span="12">
                <el-panel>
                    <el-divider content-position="left">市场份额全国分布情况-{{province}}</el-divider>
                    <ve-map :data="cityData" :settings="citySettings" :events="provinceChartEvents"/>
                </el-panel>
            </el-col>
            <el-col :span="12">
                <el-panel>
                    <el-divider content-position="left">市场份额全国分布情况-{{province}}</el-divider>
                    <ve-pie :data="cityData"/>
                </el-panel>
            </el-col>
        </el-row>
    </div>               
</template>
<script>
export default {
    name: "stat-panel",
    data() {
        var _self = this;
        return {
            cityMapping:{
                '北京':'beijing',
                '上海':'shanghai',
                '天津':'tianjin',
                '重庆':'chongqqing',
                '黑龙江':'heilongjianng',
                '吉林':'jilin',
                '辽宁':'liaoning',
                '河北':'hebei',
                '河南':'henan',
                '山东':'shandong',
                '山西':'shanxi',
                '湖北':'hubei',
                '湖南':'hunan',
                '江西':'jiangxi',
                '广东':'guangdong',
                '福建':'fujian',
                '江苏':'jiangsu',
                '安徽':'anhui',
                '浙江':'zhejiang',
                '四川':'sichuan',
                '青海':'qinghai',
                '陕西':'shanxi',
                '海南':'hainan',
                '云南':'yunnan',
                '贵州':'guizhou',
                '新疆':'xinjiang',
                '西藏':'xizang',
                '宁夏':'ningxia',
                '广西':'guangxi',
                '内蒙古':'neimenggu',
                '台湾':'taiwan',
            },
            province: '河南',
            provinceChartEvents:{
                click:(e) => {
                    console.log(e);
                    var province = e.name;
                    _self.province = province;
                    _self.initCityData(province);
                }
            },
            provinceData: {
                columns: ['省份', '数量'],
                rows: [
                    {'省份':'北京','数量':22},
                    {'省份':'上海','数量':32},
                    {'省份':'重庆','数量':42},
                    {'省份':'天津','数量':22},
                    {'省份':'河南','数量':44}
                ]
            },
            citySettings:{
                position: 'province/henan'
            },
            cityData: {
                columns: ['市', '数量'],
                rows: [
                    {'市':'郑州市','数量':12},
                    {'市':'商丘市','数量':32},
                    {'市':'洛阳市','数量':62},
                    {'市':'新乡市','数量':22}
                ]
            }
        };
    },
    mounted() {
         this.initData();
    },
    methods: {
        initData() {
            this.initDealerList();
        },
        initCityData(provinceName = 'all'){
            var isLoadProvince = provinceName === 'all';
            if(isLoadProvince){
                this.provinceData.rows = [];
            }else{
                this.cityData.rows = [];
                this.citySettings.position = 'province/' + this.cityMapping[provinceName];
            }
        },
    }
};
</script>
<style scoped>

</style>

5.2、配置路由

src/router下创建index.js

代码如下：

import Vue from 'vue'
import Router from 'vue-router'

import defaultPage from '@/page/default'
import chartsPage from '@/page/charts'

Vue.use(Router);

export default new Router({
    routes: [
        {
            path: '/',
            redirect: {
                name: 'default'
            }
        },
        {
            name : 'default',
            path : '/default',
            component: defaultPage
        },
        {
            name : 'charts',
            path : '/charts',
            component: chartsPage
        }
    ]
});

5.3、App.vue

src/App.vue 修改如下

代码如下：

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

<script>
export default {
  name: 'app'
}
</script>

<style>
#app{
    height: 100%;
    width: 100%;
}
</style>

5.4、main.js

作为运营主程序的入口，src/main.js修改如下

代码如下：

import Vue from 'vue'
import App from './App.vue'

// ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

// components
import './components/'

Vue.use(ElementUI)

import VCharts from 'v-charts'

import router from './router/index'

Vue.use(VCharts);

new Vue({
  el: '#app',
  router,
  render: h => h(App)
}).$mount("#app")

5.5、components

src/components 新建index.js，作为自定义组件入口。譬如，我们下面自定义了一个elPanel。

代码如下：

import Vue from 'vue'

import elPanel from "@/components/panel.vue";
Vue.component('elPanel', elPanel);

5.6、运行

访问：http://localhost:8080/#/charts

部分截图-1

部分截图-2

6、源码地址

完整代码目录：
完整代码目录

https://gitee.com/suze/vue-start

7、相关文档

  • https://router.vuejs.org/installation.html
  • https://router.vuejs.org/zh/guide/
  • https://element.eleme.cn/#/zh-CN/
  • https://v-charts.js.org/#/
  • https://cli.vuejs.org/

下面的是我的公众号二维码图片，欢迎关注，或公众号搜索【秋夜无霜】。
秋夜无霜

秋夜无霜
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-cli搭建项目
weixin_30815427的博客
08-20 1205
一、全局化安装cnpm 其实对于安装vue-cli，使用npm命令和cnpm命令都是可以的，个人觉得使用npm安装的比较慢，而且很可能会因为网络问题而出错，所以还是觉得使用cnpm稳一点。 npm install cnpm -g --registry=https://registry.npm.taobao.org （1）全局安装 vue-cli ，在命令提示窗口执行： cnpm in...
vue-cli项目搭建
qq_56989507的博客
11-03 147
使用vue-cli脚手架构建项目
v-charts使用-柱状图属性
weixin_48399505的博客
09-30 1万+
V-Charts的基本使用
最新发布
weixin_49352307的博客
03-17 2399
都是Array类型，第一个参数都是左侧最小，第二个参数都是最大值。默认值normal,就是rows中的正常展示的数据。图标节点上的提示框 ，默认显示提示框（true）category:默认类型，适用于离散的类目数据。可选值：KMB,normal，percent。默认情况：只会展示左侧数据,右侧不会展示。'value':数值轴，适用于连续数据。time：时间轴，适用于连续的时序数据。KMB会把大于千的数据转换为k单位。修改图例名称 ，不修改提示框的名称。图例显示 ，默认显示（true）main.js中写入。
vue中使用echars和v-charts的区别
大屌的博客
12-26 1万+
文章目录
如何创建 vue-cli 项目
weixin_62897746的博客
09-24 3052
官网直接下载并安装node，安装过程很简单一路下一步就行，安装完成后打开命令行（window+r,输入cmd），输入node-v 如下图出现版本号则成功。打开命令行输入：npm install vue-cli -g，安装完成后输入 vue-V（这里的‘V’是大写），如下图如果出现对应的版本号则安装成功。通过上面两步，我们需要的环境和工具都准备好了，接下来就使用vue-cli来创建项目。以上就是安装vue-cli的全过程，后续会持续发布新文章，敬请关注。
Vue-cli（基于cli如何创建项目）最详细教程，手把手教学
分享java学习路上的一些笔记，不足之处多多见谅。
06-14 5506
Vue-cli（基于cli如何创建项目）最详细教程，手把手教学
vue-cli4-vant：基于vue-cli4和vant的移动端开发模板
02-06
vue-cli4-vant简介这是基于vue-cli4实现的移动端H5开发模板，其中包含项目常用的配置及组件封装，可以快速开发使用。技术栈：vue-cli4 + webpack4 + vant + axios +更少+ postcss-px2rem // 安装依赖npm install// ...
vue-cli3-template：基于Vue-cli3建造的脚手架项目模板
01-31
项目介绍基于Vue-cli3建造的前端开发脚手架项目模板，主要包括以下内容：Webpack4.x性能调优配置，Vue.js全家桶，移动端vw适应，单元测试等功能，可以参考，欢迎大家围观指教！项目特点特征 巴别塔 VueRouter 威克斯...
vue-cli3-template:基于 vue-cli 搭建的前端模板
05-27
:rocket: 结合 vue-cli3 的 preset 搭建基于 git repo 的前端项目模板，可以移步 特性 CSS 预编译语言： Ajax: ，做了一定的封装，详见 src/services/request.js SVG 雪碧图： 移动 web 的适配方案：引入了 postcss-...
vue-cli-plugin-multiple-page:基于vue-cli https的buildwatch多页面条目插件
05-30
一个基于 vue-cli 捆绑多个页面的插件。 与vue-cli's pages配置不同，它是通过将多个页面分片到不同的 webpack 配置来处理的 用法 在你的 vue-cli 创建的项目中安装插件，如果没有请参考 vue add multiple-page ...
vue-cli-plugin-vite：与vue-cli一起使用Vite Today
03-04
在生产中：基于webpack的vue-cli仍然是捆绑webapp的最佳实践（通过代码拆分，旧版浏览器的旧版构建）。 在开发中：即时启动服务器并通过闪电快速实现HMR很有趣。 我们为什么不一起使用它们呢？ // vue.config.js ...
Vue CLI创建Vue项目详细步骤
mingfeng4923的博客
08-17 4765
通过这些步骤，您已经成功地使用Vue CLI创建了一个新的Vue项目，根据项目需求进行了相应的配置。这里的意思是问你本次项目是否采用history模式，如果选择Y,需要后台配置具体看vueRouter官网解释，这里我门选择 n。这里是问你是否记录这次配置选择，选择之后会让你为这次配置起一个名字，这样下次可以直接快速配置选择，最后回车后就会初始化项目了。这里的意思是问你选择哪一种CSS预处理语言，我的项目中一般使用的是SCSS我选择第一个。创建过程中，您将进入一个交互式的选择界面，根据您的需求进行配置。
vue-cli创建vue项目详细步骤
Hannah_Hannah_的博客
04-15 2万+
一、安装node环境 二、下载vue和vue-cli脚手架 命令：npm i-g vue ; npm i -g @vue/cli 三、在想要创建的位置路径下打开cmd（直接点击路径输入cmd即可打开当前位置的终端） 四、创建vue项目，输入命令（ vue create 项目名称） 五、进入详细选择 (上下 方向键选择,空格键确定,enter进入下一步) 1、默认vue2版本和默认vue3版本都是有Eslint和Babel的，Eslint是代码规范的，Babel是将ES6转化为ES.
Vue-13.创建完整的Vue项目（vue+vue-cli+js）
yueerba126的博客
08-18 1032
上章写了命令创建Vue项目，但是事实上我们可以直接用编译器直接创建项目，这里我使用webstorm。
v-charts实现折线图（前端+后端）
weixin_72325776的博客
05-05 1802
v-charts基于 Vue2.x 的 Echarts 组件。
echarts入门教程（超级详细带案例）
热门推荐
m0_55734030的博客
10-27 10万+
1.echarts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。 2.学习一项技术的关键，还是需要多读官方文档，官网链接Apache ECharts,与之类似的图表库还有D3，HeightCharts。 3.echarts的下载 （1）从 npm 获取 （2）从 CDN 获取 （3）从 GitHub 获取 （2）color调色盘 在 option 中设
Vue基础知识总结 10：使用vue-cli（vue脚手架）快速搭建项目
学Java，找哪吒
10-08 4万+
???? Java学习路线：搬砖工逆袭Java架构师 ???? 简介：Java领域优质创作者????、CSDN哪吒公众号作者✌ 、Java架构师奋斗者???? ???? 扫描主页左侧二维码，加入群聊，一起学习、一起进步 ???? 欢迎点赞 ???? 收藏 ⭐留言 ???? ...
Nutz+jQuery esayUI Datagrid实现增删改查以及分页效果
秋夜无霜
05-12 9044
本实例通过国内比较流行的MVC框架-Nutz，前台使用jquery EasyUI，其中表格使用的Datagrid实现数据员工管理，其中涉及增加、删除、修改、分页效果。 maven管理依赖源码：https://gitee.com/suze/zms_maven Jar包管理源码：https://gitee.com/suze/zms_jars   本实例在开发中涉及的的问题有： 1、如何共...
Vue.js项目开发：使用vue-cli搭建脚手架指南
"这篇文档详细介绍了如何使用vue-cli搭建基于Vue.js的开发脚手架，同时涉及到了Node.js环境的安装、npm包管理工具以及Webpack自动化构建工具的使用。" 在现代前端开发中，Vue.js作为一款轻量级且功能强大的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值