vue-cli 是vue.js的标准工具
vue-cli 需要进行一个全局性的安装
安装
npm install -g @vue/cli
# OR
yarn global add @vue/cli
查看版本
vue --version
升级
npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli
使用vue-cli
我们需要在终端中输入
格式：vue create 名称
名称不可以是中文。
vue create hello-world
在我们执行完这个代码后，我们可以看到以下文件夹
完整内容
在这个文件中，已经包含了webpack打包工具，我们在终端中运行命令。代码如下：
//这个是打包执行的代码
npm run build
//运行这个项目
npm run serve
在我们使用vue-cli工具来进行项目的开发，我们的开发页面，我们写在components文件夹中，在这个时候，我们需要下载一个插件vetur,在components文件夹中，我们创建以xxx.vue格式的文件，这个文件中，我们有三个部分，分别是template、script、style。
在template中，需要有个根标签<dviv>
在script中，我们需要导出一个对象，我们通常会有一个name: 姓名
xx.vue 其实就是一个组件，所以我们的data是一个方法放回一个对象
<script>
export default {
name: "App",
};
</script>
在style中，是写样式的
最终我们中引入我们的组件
组件使用步骤
在`App.vue`文件中，用Es6 导入我们的组件 名称通常跟文件名相同
import Emement from './components/Emement.vue'
在components中注册组件 然后在页面中使用
main.js文件中，我们使用render渲染函数来渲染页面
//箭头函数
render: h => h(App),
//普通函数
render:function (h) {
return h(App)
}
使用Element-ul组件库
使用需要下载 npm i element-ui -S,
我们下载完成后需要在main.js页面中引入
//引入element-ui 组件库
import ElementUI from 'element-ui';
//引入element-ui 的 css
import 'element-ui/lib/theme-chalk/index.css';
//因为是插件，需要引入
Vue.use(ElementUI);
完成以上步骤，就可以使用Element-ul组件库
ECharts 基于 JavaScript 的开源可视化图表库
在终端输入
npm install echarts --save
在script中引入
import * as echarts from 'echarts';
在生命周期函数mounted中放入一下实例代码
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("main"));
// 绘制图表
myChart.setOption({
title: {
text: "ECharts 入门示例",
},
tooltip: {},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
});
