综合开发

入门开发一个vue项目

微信扫一扫,分享到朋友圈

入门开发一个vue项目

作为一个前端小白(本职是搞android,基本没做过web端的)最近接到任务要搞个apk托管的平台,其实页面也很简单。就学了下vue花了一两周时间搞了。现在自己简单总结下

环境准备

  1. nodejs:内置chorm v8引擎。运行在服务端的javaScript。nodejs中包含npm用来管理项目以及包,插件的安装。django也是类似的。只是用的python实现的
  2. 安装vue-cli脚手架,一个vue项目创建 部署的命令行工具 命令npm i vue-cli -g
  3. 安装webpack同时初始化项目 vue init webpack myproject

    整个流程如下

    引用https://www.jianshu.com/p/296ca4cb5b0b

vue语法和使用疑点

详细的需要到官网查看

入门需要了解的是:

  1. vue实例的创建
  2. vue实例结构,生命周期,常用api
  3. vue指令 v-bind v-on v-if v-for…
  4. vue组件,组件数据绑定,组件事件绑定
  5. 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');
  1. js文件如何能够提供给vue使用?
    通过export方法导出js文件中对象
  2. vue组件中为什么要用export default的写法
    export default 用来引出一个对象,在对象内部可以通过this获取vue的实例,注意这个对象本身只是个对象不是vue实例。 为什么呢?因为内部会通过Vue.extend方法将对象作为Vue实例的一个‘子类’
  3. 部分组件数据改变但是不刷新怎么办?比如我用了个二维码组件,url改变后必须手动刷新才会改变
    可以通过下面方法强制刷新
...
<div v-qr="appurl" v-if="codeRefresh" />
...
function refreshQrCode(vm) {
vm.codeRefresh = false
//v-if 强制刷新子组件
vm.$nextTick(() => {
vm.codeRefresh = true
});
}
  1. 数组数据变更赋值,视图未发生改变

    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)
  1. 原数据没有的属性发生变更,视图未发生改变
//https://www.jianshu.com/p/71b1807b1815 新增的属性数据更新,视图无法更新
//l.cheked = false。checked属性变化视图不会发生变化,需要像下面这么写
vm.$set(l, 'checked', false)
  1. 避坑–字段前面不加this导致视图不刷新。
    不加this 改变的只是局部的默认值,加了this改变的是全局的
  2. v-bind 指令后面跟表达式的时候,比如动态替换class
<!-- https://www.cnblogs.com/lwming/p/10925318.html 动态绑定class的方式 -->
<div :class="[apkInfo.checked?'active parent':'in-active parent']" @click="rbClick">
  1. 同上src的动态赋值
<!-- https://blog.csdn.net/milan_kunderla/article/details/80319548 src动态赋值 -->
<img :src="https://www.tuicool.com/articles/VvM7ZzM/[require(apkInfo.checked?'../assets/icon_check.png':'../assets/icon_cart_uncheck.png')]">
  1. 如何跨域请求,联调接口需要

    修改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原理等等

瑞德西韦获 FDA 批准成为孤儿药 但离真正上市还有距离

上一篇

Performance comparison. R2DBC vs JDBC

下一篇

你也可能喜欢

评论已经被关闭。

插入图片

热门栏目

入门开发一个vue项目

长按储存图像,分享给朋友