Vue学习

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>

1. template里只能有一个根标签 

2. vue文件-独立模块-作用域互不影响

3. style配合scoped属性, 保证样式只针对当前template内标签生效

4. vue文件配合webpack, 把他们打包起来插入到index.html

10.清除原有的不需要的文件

清除后的App.vue文件

<template>
  <div></div>
</template>

<script>
export default {

}
</script>

<style>

</style>

assets 和 components 文件夹下的一切删除掉 (不要logo和HelloWorld页面)

我们就可以开始写自己的vue文件