关于自己学vue的一些基础总结

笔记:

webpack:

1. 安装4.0以上的webpack还需要再安装webpack-cli
2. webpack.config.js 中的API如果是复数，一般是数组
3. webpack.config.js配置文件中的plugins：HtmlWebpackPlugin要放在插件的首位，不然会出错
4. 匹配vue文件时，要在plugins里面配置new VueLoaderPlugin()
5. 打包js文件时 要避免打包 node_modules
6. 配置不同的文件，需要不同的加载器loader,部分loader会依赖其他loader，被依赖的loader不一定要加入匹配规则

vue-cli:

1. 要先全局安装webpack
2. 安装cli3:npm install @vue/cli -g
3. 安装cli2模板：npm install @vue/cli-init -g

vue-cli2运行方式：vue init webpack [项目名称]
选项解析：
runtime-compiler 是注册组件，然后替换模板，template=>ast=>render=>dom
runtime-only 比上面轻了6kb，是直接渲染模板对象到页面中，因为vue-template-complier会将组件的template编译成对象， 直接render=>dom, 性能更高，代码量更少.
运行项目方式：npm run dev

vue-cli3运行方式：vue create [项目名称]
在选项配置时可以手动添加各种loder和test，目录多了个浏览器管理文件和public文件夹存放资源
通过命令vue ui来进入用户图形界面来操作webpack配置文件和各种依赖和loader还有运行参数等等
安装vue-cli3时多了个vue-service,里面封装了webpack配置文件,负责编译和热更新,用于开发环境
运行项目方式：npm run service

axios

1. 通过axios.create创建实例，不需要设置全局接口，并且具有promise属性，可以直接返回实例来调用.then
2. 请求拦截： 实例对象.interceptors.request.use()
3. 响应拦截： 实例对象.interceptors.response.use()

router

1. router-link每次被选中时，身上会有两个动态class，可以通过linkActiveClass: 'myactive’来修改该类表示活动状态
2. router-view默认放置defalut组件，可以给router-view加name属性，并在组件前面加’name的值’做到单页面多个 router-view布局
3. this.$ router是一个路由导航对象，可以方便的使用js代码实现路由的跳转:
   const userId = ‘123’
   router.push({ name: ‘user’, params: { userId } }) // -> /user/123
   router.push({ path: /user/${userId} }) // -> /user/123
   // This will NOT work
   router.push({ path: ‘/user’, params: { userId } }) // -> /user

vuex

通过new Vuex.Store() 实例，得到一个 数据仓储对象

1. state中的数据，不能直接修改，如果想要修改，必须通过 mutations
2. 如果组件想要直接 从 state 上获取数据： 需要 this.$store.state.***
3. 如果 组件，想要修改数据，必须使用 mutations 提供的方法，需要通过 this.$store.commit(‘方法的名称’， 唯一的一个参数)
4. 如果 store 中 state 上的数据， 在对外提供的时候，需要做一层包装，那么 ，推荐使用 getters, 如果需要使用 getters ,则用 this.$store.getters.***

将代码提交到码云：

##要先创建账号和密码，并且设置远程数据库，还要添加README.md文件和.gitignore来避免不必要的文件

1. git add .
2. git commit -m “提交信息”
3. git push
4. 除了上面的操作，可以在设置远程数据库后，可以在vs code上进行保存和推送数据

容易忽略的基础知识

1. 为保证代码的可维护性，多个组件不能对 第三方包 太过依赖，可以将第三方包 封装 在一个文件
2. v-bind:is="" 引号里面的内容当作表达式来解析
3. 将非超链接改为router-link影响样式时,可以使用tag转换回原来的使用样式
4. 导入其他目录的js文件来创建对象 需要添加{}存放对象 例：import {request} from ‘./network/request’
5. 从网上数据获取图片信息时，传过来的是个对象，img标签要加v-bind指令
6. 使用v-for渲染，一定要加:key="" key里面的内容要唯一，不能重复，建议为数值和字符串
7. template模板中 只能有一个根元素, 如果模板里面有v-for 可以用template-group做模板标签
8. 在组件中的 data 被定义为一个方法，并且要返回一个对象
9. 父组件向子组件传值时要把别名和数据用v-bind绑定在一起，子组件中要使用 props 属性来接收别名，
   通过别名使用数据里面的数据，接收的数据只能读，不能更改，不然会报错
10. 父组件向子组件传递方法：在子组件中用v-on把别名和方法绑定在一起，别名就能引用父组件的方法，如果子组件在模板 对象中设立一个子组件的方法，然后在子组件的methods里面设置这个方法使用this.$emit触发父组件的方法
    可以在父组件方法中添加参数，然后子组件调用父组件方法时，可以把数据传递回来给父组件
11. 在标签和组件中可以添加ref=""，使用this.$refs来获取标签和组件的对象