一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。
vue 项目的运行流程
在工程化的项目中，vue 要做的事情很单纯：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。
其中：
① App.vue 用来编写待渲染的模板结构
② index.html 中需要预留一个 el 区域
<div id="app"></div>
<!-- built files will be auto injected -->
③ main.js 把 App.vue 渲染到了 index.html 所预留的区域中
//导入Vue的包，得到Vue的构造函数
import Vue from 'vue'
//导入App.vue根组件，将来要把App.vue中的模板结构，渲染到html里面
import App from './App.vue'
Vue.config.productionTip = false
//创建Vue实例对象
new Vue({
// 把render函数指定的组件，渲染到html页面中(将App替换掉#app)
render: h => h(App),
}).$mount('#app')
Vue实例的 .$mount('选择器') 来指定要替换的结构；该方法和在Vue实例里面使用el属性指定的效果是一样的！如下：
const vm =new Vue({......});
vm.$mount('#app');
const vm =new Vue({
el:'#app',
......
});
-
引入一个自定义的Vue文件（举一个小例子：）
-
创建一个vue文件，命名为 ‘test.vue’
-
写入相应的vue代码
注意：在 template 标签里面，只能有一个根元素，如果有大于等于两个的根元素的话，系统就会报错的（Component template should contain exactly one root element ）！
<template> <div> <h3>这是用户自定义的模板组件</h3> </div> </template> -
在main.js文件里面导入我们自定义的模板组件并使用
//导入Vue的包，得到Vue的构造函数 import Vue from 'vue' //导入test.vue根组件，将来要把test.vue中的模板结构，渲染到html里面 import Test from './test.vue' Vue.config.productionTip = false //创建Vue实例对象 new Vue({ // 把render函数指定的组件，渲染到html页面中(将App替换掉#app) render: h => h(Test), }).$mount('#app') -
这就可以运行了！！！
我们可以看一下 package.json 文件里面的内容，其中有一个调试，里面有 serve 和 build 两个选项，在我们平常开发的时候，我们使用第一个选项就可以了，发布的时候就要使用第二个选项了
//第一种启动方式 npm run serve //第二种启动方式 npm run build -
在浏览器中打开本地网页
注意：打开之后，我们一定不要给运行的终端窗口给终止了，(在 Vs code 的终端里面，右上角的小叉号是隐藏当前终端----对我们项目运行是没有影响的，但是那个垃圾箱的按钮是终止，点击的话就相当于关闭该终端了，然后项目就停止运行了，为我们在浏览器里面也会无法访问的！！！)
-
vue 组件
1. 什么是组件化开发
组件化开发指的是：根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护
2. vue 中的组件化开发
vue 是一个支持组件化开发的前端框架。
vue 中规定：组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。
3. vue 组件的三个组成部分
每个 .vue 组件都由 3 部分构成，分别是：
-
template -> 组件的模板结构
-
script -> 组件的 JavaScript 行为
-
style -> 组件的样式
其中，每个组件中必须包含 template 模板结构，而 script 行为和 style 样式是可选的组成部分。（一般情况下：三者在vue文件里面的顺序是 template-script-style ）
<template>......</template>
<script>......</script>
<style>......</style>
在之前我们创建项目的时候就引进了 Less 预处理器，我们先使用的话，需要这样写：
<template>......</template>
<script>......</script>
<style lang="less">......</style>
3.1 template
vue 规定：每个组件对应的模板结构，需要定义到
