点关注，不迷路，每天大量前端知识点更新

vue-cli搭建过程详解

一、安装node.js

进入官网下载node.js

二、安装 cnpm

1、说明：npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）；

安装：npm install -g cnpm --registry=https://registry.npm.taobao.org安装淘宝镜像
之后为cnpm
输入cnpm -v，可以查看当前cnpm版本	

三、安装vue-cli脚手架构建工具

安装：$ cnpm install vue-cli –g //g表示全局安装
 vue -V（注意这里是大写的“V”）查看是否安装成功

四、创建一个基于webpack模板的新项目

要创建项目，首先我们要选定目录，然后再命令行中把目录转到选定的目录。可以使用：

$ vue init webpack my-app // my-app为自定义项目名
Project name (my-app) # 项目名称（我的项目）
Project description (A Vue.js project) # 项目描述一个Vue.js 项目
Author 作者（你的名字）
Install vue-router? (Y/n) # 是否安装Vue路由，也就是以后是spa（但页面应用需要的模块）
Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代码？（Y [ yes ] / N [ no ]）
Pick an ESLint preset (Use arrow keys) # 选择一个预置ESLint（使用箭头键）
Setup unit tests with Karma + Mocha? (Y/n) # 设置单元测Karma + Mocha？（Y/ N）
Setup e2e tests with Nightwatch? (Y/n) # 设置端到端测试，Nightwatch？（Y/ N）
注：当然这些都看你自己个人的情况
五、运行项目
$ cnpm run dev
六、安装项目所需要的依赖
刚初始化的项目是没有依赖的，如果运行会报类似这样的错误，输入命令
$ cnpm install 

echarts入门

npm install echarts

然后在脚手架的helloworld.vue替代为以下代码即可

<template>
 <div>
 <div id="main" ref="chart"></div>
 </div>
</template>
<script>
var echarts = require("echarts");
export default {
 name: "charts",
 data() {
 return {
 data:"",
 a:"g"
 }},
 mounted() {
 let mychart = echarts.init(this.$refs.chart);
 mychart.showLoading();
 setTimeout(function() {
 let self = this;
 self.data = { 
 series : [
 {
 name: '访问来源',
 type: 'pie',
 radius: '55%',
 roseType: 'angle',
 backgroundColor: '#2c343c',
 itemStyle: {
 // 阴影的大小
 shadowBlur: 200,
 // 阴影水平方向上的偏移
 shadowOffsetX: 30,
 // 阴影垂直方向上的偏移
 shadowOffsetY: 40,
 emphasis: {shadowBlur: 800,},
 // 阴影颜色
 shadowColor: 'rgba(0, 0, 0, 0.5)', 
 }, 
 textStyle: {
 color: 'rgba(255, 255, 255, 0.3)'
 }, 
 labelLine: {
 lineStyle: {
 color: 'rgba(255, 255, 255, 0.3)'
 }
 }, 
 // 高亮样式。
 emphasis: {
 itemStyle: {
 // 高亮时点的颜色。
 color: 'blue'
 },
 label: {
 show: true,
 // 高亮时标签的文字。
 color: 'black'
 }
 }, 
 data:[
 {value:235, name:'视频广告'},
 {value:274, name:'联盟广告'},
 {value:310, name:'邮件营销'},
 {value:335, name:'直接访问'},
 {value:400, name:'搜索引擎'}
 ]
 }
 ]
 }; 
 mychart.hideLoading();
 mychart.setOption(this.data);
 }, 3000)
 console.log(this.a);
 console.log(this.data); 
 }
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 #main {
 width: 600px;
 height: 400px;
 /* background-color:black; */
 margin: 0 auto;
 }
</style>

然后再cmd输入

npm install

npm run dev