1.了解vue
1.什么是vue？
渐进式的javascript的框架 拥有自己的语法规则
2.什么叫渐进式 ？不需要全部使用 循序渐进 逐渐进步。
3.框架是什么？拥有自己的语法，我们要使用框架必须遵循框架的语法
4.框架和库有什么区别？
库：是一些属性和方法的集合
框架：有自己的语法和规则
5.如何学好vue 多敲！！！多练！！！
2.脚手架
vue是基于wenpack环境开发
如果我们自己配置过微webpack 我们会发现非常繁琐，而且容易报错 。
vue官网给我们提供了一个脚手架 可以解决这一问题 提高我们的开发效率。
1.什么脚手架？
一套标准的文件夹+文件结构+webpack配置，快速搭建项目基本环境
2.好处：
-
开箱即用
-
0配置webpack
-
babel支持
-
css, less支持
-
开发服务器支持
3.准备工作：全局安装?@vue/cli 得到vue命令 通过vue-V检查是否成功 如果成功就会看见当前安装的vu版本号。
4.创建项目：在安装好@vue/cli后我们会得到一个vue命令 新建文件夹 打开cmd输入命令vue.create 文件夹名称 （注意不能是中文，不能有特殊字符，不能有大写的字母）
输入命令我们会看到这样的界面 黄色的字是指模块 我这里以vue2为模块
?如果你同时安装了yarn 和 npm两个包管理器 还会有一个询问
?这个根据自己的喜好 这里我以npm为例
坐等下载.......
下载好后
?我们启动内置的开发服务器 npm run serve
?为什么会报错 注意我们不能再创建的文件夹下敲npm run serve 我们进入项目文件夹 再敲
?
?
?我们如果看到这样的结果
?
?就说明成功了 我们可以在浏览器输入给我们返回的地址 就能看见效果
这是脚手架自带的内容
6.脚手架目录
我们已经创建了一个脚手架项目 我们发现他给我们带来好多文件 我们先看目录的作用
?主要的目录
代码和结构分析?知道项目入口和文件关系
?入口文件 main.js 文件
vue页面入口 App.Vue文件? 将多个vue组件引入到App.vue文件里?
浏览器运行页面 index.html?
7.自定义配置
我们之前学习webpack的配置 里面有一个配置可以改变端口并自动打开浏览器
vue并没有给我们配置
我们需要手动配置
创建一个vue.config.js文件 写一段代码
module.exports = {
devServer: { // 自定义服务配置
open: true, // 自动打开浏览器
port: 3000
}
}8.eslint了解?脚手架内置代码检查工具
?
?解决方法
?
9.单vue文件
<!-- template必须, 只能有一个根标签, 影响渲染到页面的标签结构 -->
<template>
<div>欢迎使用vue</div>
</template>
<!-- js相关 -->
<script>
export default {
name: 'App'
}
</script>
<!-- 当前组件的样式, 设置scoped, 可以保证样式只对当前页面有效 -->
<style scoped>
</style>
-
template里只能有一个根标签?
-
vue文件-独立模块-作用域互不影响
-
style配合scoped属性, 保证样式只针对当前template内标签生效
-
vue文件配合webpack, 把他们打包起来插入到index.html
10.清除原有的不需要的文件
清除后的App.vue文件
<template>
<div></div>
</template>
<script>
export default {
}
</script>
<style>
</style>assets 和 components 文件夹下的一切删除掉 (不要logo和HelloWorld页面)
我们就可以开始写自己的vue文件