脚手架环境

1. 脚手架环境（vue-cli）

　　npm i vue/cli -g　　vue -V 能看到版本号就是安装成功了

　　vue create 项目的名字　　（创建脚手架成功）

　　cd 项目的名字

　　yarn serve

　　浏览器 http://localhost:端口号

　　补充：babel es6 —>es5，eslint 语法格式检查工具

2. 脚手架基本的目录结构：

　　依赖是装在node_modules目录下

　　public  静态资源目录

　　src 源码目录

　　.gitignore 上传git仓库时忽略的文件

　　babel.config.js  babel的配置文件

　　readme 项目的说明文件

　　package.json 包的管理文件

3. 用的是 es6 模块化

　　导入 import 变量 from '组件的路径'

　　导出 export default

4. 单文件组件（.vue）　　vue-loader 把单文件组件解析为标准的vue组件

　　<template></template>

　　<script></script>

　　<style></style>

5. 脚手架有“热更新”能力，即改变数据后自动刷新页面（默认安装了webpack-dev-server）

6. style scoped 属性，加上后样式只对当前组件生效

7. 改项目的配置文件

　　在项目的根目录下建立一个Vue.config.js文件

　　写配置，报错后要重新启动项目才会生效

8. 脚手架 　　@ 代表  “src” 

　　　　　　 单页应用（SPA）

 

补充：

升级脚手架到vue-cli3.0版本的时候出现了这个报错：

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

改项目的配置文件

 　　在项目根目录下建立一个Vue.config.js文件

 　　写配置 如:

  module.exports = {

    devServer: {

        overlay: { //让我们的浏览器关闭掉遮盖层的错误代码提示

            warnings: false,

            errors: false

        }

    },

    lintOnSave: false //直接关闭eslint检查

}

报错后，重新启动项目生效    

 

9. 导入  import 变量 from '组件的路径'

    导出  export   引入的时候，变量名 {导出时的变量名}  

　 默认导出 export default   导入时变量名是任意的

    export const a=5;

    import {a} from '...'

    

    export default a    默认导出只能有一个

    import c from '...'

10. 为了不再各个组件里重复引入axios

　　1）可以再入口文件  main.js里

       　　 import axios from 'axios';

    　　    Vue.prototype.$axios=axios

      　　  在组件里就可以使用this.$axios.....发请求了

　　2）另一个方法：把请求的所有方法，都封装起来，需要请求时调用

 

11. 异步的数据的传值

　　npm i swiper --save

　　npm i swiper@5.2.0 --save (老版本)

　　npm uninstall swiper（卸载swiper）

 

12. this.$nextTick(callback)

　　nextTick延迟执行回调函数 知道dom就绪