【记】Vue创建项目及初始化构建

一、创建Vue项目

使用vue cli 脚手架工具, 通过vue create [name]创建项目.

// 创建项目
vue create fandeng

// 进入项目
cd fandeng
// 运行项目
npm run serve

二、本地文件夹和远程仓库关联

1. 进入本地文件夹, 执行git init创建.git文件
2. 执行git remote add origin [git仓库地址]让本地文件夹与远程仓库关联起来
3. 执行git pull origin master获取远程仓库代码
4. 执行git status查看当前更改状态
5. 执行get add .提交更改的文件
6. 执行get commit -m '提交注释'提交全部并注释
7. 执行get push将代码推送到远程服务器上, 首次推送可能需要执行git push --set-upstream origin master

添加Vue3.0的组合式Api插件

安装: npm install @vue/composition-api --save

// 在main.js中注册组件
import VueCompositionApi from '@vue/composition-api'
Vue.use(VueCompositionApi)

// 在组件中使用
import { ref } from '@vue/composition-api'
export default { 
  setup() {
    const message = ref('定义动态数据')
    return {
      message
    }
  }  
}

三、使用在线 Mock 数据

Fast Mock

四、axios

安装: npm i axios -S

import axios from 'axios'

// 设置axios的公共配置
const _Axios = axios.create({
  baseURL: 'https://www.fastmock.site/mock/c51b78103db869e5864bfe32573da5e2/fandeng/',
  timeout: 5000, // 设置超时时间
  headers: {
    token: 'token123456'
  }
})

// 请求拦截器(请求之前的一些统一处理)
_Axios.interceptors.request.use((config) => {
  console.log("请求拦截器：", config)
  return config
})

// 响应拦截器(在响应之后对数据进行一些处理)
_Axios.interceptors.response.use((response) => {
  console.log("响应连接器：成功", response)
  return Promise.resolve(response.data)
}, (error) => {
  console.log("响应连接器：失败", error)
  return Promise.reject(error)
})

// GET: 
export function requestGet (url) {
  return _Axios.get(url).then((response) => {
    return Promise.resolve(response.data)
  })
}

// POST: 
export function requestPost (url, data) {
  return _Axios.post(url, data).then((response) => {
    return Promise.resolve(response.data)
  })
}

五、本地存储

// key: 存储的名称 value: 存储的内容  duration: 过期时间(毫秒)
export function setStorage(key, value, duration) {
  const time = (duration && typeof duration === 'number') ? (new Date()).getTime() + duration : 0
  const data = {
    content: value, // 可能是字符串、[]、{}
    expiryTime: time // 有效时间 
  }
  window.localStorage.setItem(key, JSON.stringify(data))
}

// 获取本地数据
export function getStorage(key) {
  const data = window.localStorage.getItem(key)
  if(!data || data === null) {
    return null
  }
  let result
  try {
    result = JSON.parse(data)
  } catch(error) {
    return null
  }

  const { content, expiryTime } = result
  if(expiryTime === 0 || expiryTime >= (new Date()).getTime()) {
    return content
  }
  return null
}

// 删除指定存储的数据
export function removeStorage(key) {
  window.localStorage.removeItem(key)
}

// 删除所有存储数据
export function clearStorage() {
  window.localStorage.clear()
}