五、工程化开发和脚手架Vue CLI
开发 Vue 的两种方式:
1.核心包传统开发模式:基于 html/css/js 文件，直接引入核心包，开发 Vue.
2.工程化开发模式:基于构建工具(例如:webpack)的环境中开发 Vue。
一、基本介绍：
Vue CLl 是 Vue 官方提供的一个可以帮助我们快速创建一个开发 Vue 项目的标准化基础架子。【集成了 webpack 配置)，其实就是生成一个目录，内置了许多工具。
好处：
1.开箱即用，零配置
2.内置 babel等工具
3.标准化
重点！！！！使用步骤：
1.全局安装(一次):yarn globaladd @vue/cli 或 npmi @vue/cli -g
2.查看 Vue 版本:vue --version
3.创建项目架子:vue create project-name(项目名-不能用中文)4.启动项目:yarn serve 或npm run serve(找package.json)
在命令终端直接根据步骤就能完成创建。
二、项目目录介绍和运行流程
public/index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<!-- 兼容：给不支持js的浏览器一个提示 -->
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<!-- Vue所管理的容器：将来创建结构动态渲染这个容器 -->
<div id="app">
<!-- 工程化开发模式中：这里不再直接编写模板语法，通过 App.vue 提供结构渲染 -->
</div>
<!-- built files will be auto injected -->
</body>
</html>src/main.js
// 文件核心作用：导入App.vue，基于App.vue创建结构渲染index.html
// 1. 导入 Vue 核心包
import Vue from 'vue'
// 2. 导入 App.vue 根组件
import App from './App.vue'
// 提示：当前处于什么环境 (生产环境 / 开发环境)
Vue.config.productionTip = false
// 3. Vue实例化，提供render方法 → 基于App.vue创建结构渲染index.html
new Vue({
// el: '#app', 作用：和$mount('选择器')作用一致，用于指定Vue所管理容器
// render: h => h(App),
render: (createElement) => {
// 基于App创建元素结构
return createElement(App)
}
}).$mount('#app')注意代码块第三部分另一种写法也可以，表达的意思完全一样
src/App.vue
<template>
<div class="App">
<div class="box" @click="fn"></div>
</div>
</template>
<script>
// 导出的是当前组件的配置项
// 里面可以提供 data(特殊) methods computed watch 生命周期八大钩子
export default {
created () {
console.log('我是created')
},
methods: {
fn () {
alert('你好')
}
}
}
</script>
<style lang="less">
/* 让style支持less
1. 给style加上 lang="less"
2. 安装依赖包 less less-loader
yarn add less less-loader -D (开发依赖)
*/
.App {
width: 400px;
height: 400px;
background-color: pink;
.box {
width: 100px;
height: 100px;
background-color: skyblue;
}
}
</style>三、组件化开发&根组件
① 组件化:一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为
好处:便于维护，利于复用 →提升开发效率，
App.vue文件（单文件组件）的三个组成部分
如果打开的vue代码没有高亮，可以选择下载插件：Vetur
三部分的组成：
- template:结构(有且只能一个根元素)
- script:js逻辑
- style:样式(可支持less，需要装包)
让组件支持 less
(1)style标签，lang="less"开启less功能
(2)装包:yarn add less less-loader -D（如果没有安装yarn命令，可以使用npm add less less-loader -D）
总结：
(1)组件化:
页面可拆分成一个个组件，每个组件有着独立的结构、样式、行为、
① 好处:便于维护，利于复用 →提升开发效率
② 组件分类:普通组件、根组件
(2)根组件:
整个应用最上层的组件，包裹所有普通小组件。
一个根组件App.vue，包含的三个部分
① template 结构(只能有一个根节点) 需要装包 less 和 less-loader )② style 样式(可以支持less，
③ script 行为