什么是 vue-cli
vue-cli 是 Vue.js 开发的标准工具。它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程。 引用自 vue-cli 官网上的一句话： 程序员可以专注在撰写应用上，而不必花好几天去纠结 webpack 配置的问题。 中文官网：cli.vuejs.org/zh/
安装和使用
vue-cli 是 npm 上的一个全局包，使用 npm install 命令，即可方便的把它安装到自己的电脑上：
-
npm install -g @vue/cli -
查看版本号
vue -V
-
在终端下运行如下的命令，创建指定名称的项目：
vue create 项目名称 -
vue 项目中 src 目录的构成：
assets 文件夹：存放项目中用到的静态资源文件例如 CSS 样式表 图片 components 文件夹：封装的、可复用的组件，都要放到 components 目录下 main.js 是项目的入口文件。整个项目的运行，要先执行 main.js App.vue 是项目的根组件。
vue 项目的运行流程
在工程化的项目中，vue 要做的事情很单纯：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。
其中：
- App.vue 用来编写待渲染的模板结构
- index.html 中需要预留一个 el 区域
- main.js 把 App.vue 渲染到了 index.html 所预留的区域中
vue 组件的三个组成部分
每个 .vue 组件都由 3 部分构成，分别是：
- template -> 组件的模板结构
- script -> 组件的 JavaScript 行为
- style -> 组件的样式
其中，每个组件中必须包含 template 模板结构，而 script 行为和 style 样式是可选的组成部分。
<template>
<div class="test-box">
<h3>这是用户自定义的 App.vue {{ username }}</h3>
<button @click="changename">修改用户名</button>
</div>
</template>
<script>
// 默认导出，固定写法
export default {
// data 数据源
// .vue 组件中的 data 不能指向对象
// 组件中的 data 必须是一个函数
data(){
// 这个return 出去的 { } 中，可以定义数据
return {
username:'树枝'
}
},
methods:{
changename(){
// 在组件中，this 就表示当前组件的实例对象
this.username = '荔枝'
}
},
// 当前组件中的侦听器
watch: {
// 当前组件的计算属性
computed:{ },
// 当前组件中的过滤器
filters:{ },
}
}
</script>
<style lang="less">
.test-box {
width: 500px;
height: 100px;
border: 1px solid black;
text-align: center;
h3 {
color: red;
}
}
</style>
让 style 中支持 less 语法
在 标签上添加 lang="less" 属性，即可使用 less 语法编写组件的样式：
<style lang="less"></style>
