入门开发一个vue项目
2020-03-26 本文已影响0人
sys_out
作为一个前端小白（本职是搞android，基本没做过web端的）最近接到任务要搞个apk托管的平台，其实页面也很简单。就学了下vue花了一两周时间搞了。现在自己简单总结下
环境准备
- nodejs：内置chorm v8引擎。运行在服务端的javaScript。nodejs中包含npm用来管理项目以及包，插件的安装。django也是类似的。只是用的python实现的
- 安装vue-cli脚手架，一个vue项目创建 部署的命令行工具 命令npm i vue-cli -g
-
安装webpack同时初始化项目 vue init webpack myproject
整个流程如下
引用https://www.jianshu.com/p/296ca4cb5b0b
vue语法和使用疑点
详细的需要到官网查看
入门需要了解的是：
- vue实例的创建
- vue实例结构，生命周期，常用api
- vue指令 v-bind v-on v-if v-for...
- vue组件，组件数据绑定，组件事件绑定
- axios、vue-router、element-ui组件的使用
知道以上就可以简单的进行vue项目开发了，我作为js小白（搞android的）在开发的时候有一些
疑问点：
1.组件、js文件、资源文件的引入
//require和import都可以 区别：https://blog.csdn.net/u011486491/article/details/90265901
import axios from 'axios'
const api = require('../api/projectapi.js');
- js文件如何能够提供给vue使用？
通过export方法导出js文件中对象 - vue组件中为什么要用export default的写法
export default 用来引出一个对象，在对象内部可以通过this获取vue的实例，注意这个对象本身只是个对象不是vue实例。 为什么呢？因为内部会通过Vue.extend方法将对象作为Vue实例的一个‘子类’ - 部分组件数据改变但是不刷新怎么办？比如我用了个二维码组件，url改变后必须手动刷新才会改变
可以通过下面方法强制刷新
...
<div v-qr="appurl" v-if="codeRefresh" />
...
function refreshQrCode(vm) {
vm.codeRefresh = false
//v-if 强制刷新子组件
vm.$nextTick(() => {
vm.codeRefresh = true
});
}
- 数组数据变更赋值，视图未发生改变
1.通过vm.set 2.通过数组的方法
this.$set(list, index, item)
this.$set(list, this.preIndex, olditem)
//两种修改数组并能通知视图变化的方法
// list.splice(index, 1, item)
// list.splice(this.preIndex, 1, olditem)
- 原数据没有的属性发生变更，视图未发生改变
//https://www.jianshu.com/p/71b1807b1815 新增的属性数据更新，视图无法更新
//l.cheked = false。checked属性变化视图不会发生变化，需要像下面这么写
vm.$set(l, 'checked', false)
- 避坑--字段前面不加this导致视图不刷新。
不加this 改变的只是局部的默认值，加了this改变的是全局的 - v-bind 指令后面跟表达式的时候，比如动态替换class
<!-- https://www.cnblogs.com/lwming/p/10925318.html 动态绑定class的方式 -->
<div :class="[apkInfo.checked?'active parent':'in-active parent']" @click="rbClick">
- 同上src的动态赋值
<!-- https://blog.csdn.net/milan_kunderla/article/details/80319548 src动态赋值 -->
<img :src="[require(apkInfo.checked?'../assets/icon_check.png':'../assets/icon_cart_uncheck.png')]" style="width: 1.5rem; float: right; margin-top: 0.65rem; margin-right: 0.75rem;">
- 如何跨域请求，联调接口需要
修改config/index.html文件中proxyTable:
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
//https://blog.csdn.net/wh_xmy/article/details/87705840 跨域请求代理配置
proxyTable: {
'/api': {
target: serverPath, // 你请求的第三方接口
changeOrigin: true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite: { // 路径重写，
'^/api': '' // 替换target中的请求地址，也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。
}
}
},
修改axios的baseurl
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_URL, // 正式环境使用 url = base url + request url
// baseURL: '/api', //自测使用
withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})
扩展
如果想更深入开发，就需要更多了解js语法。了解nodejs语法或者Django。webpack配置项目。vue原理等等
