美文网首页
Vuejs+Vuex+TypeScript开发项目

Vuejs+Vuex+TypeScript开发项目

作者: lowpoint | 来源:发表于2022-01-10 22:09 被阅读0次

VueCLI创建项目

vue create my-project
没安装vue-cli先安装vue-cli

  • npm i -g @vue/cli
配置选择.png
自定义选择配置.png
ts选择.png
babel与ts.png
路由模式.png
sass处理.png
校验风格.png
配置.png

加入Git版本管理

  1. 创建远程仓库
  2. 将本地仓库推到线上
  • 没有本地仓库:

创建本地仓库
git init
将文件添加到暂存区
git add 文件 (git add . )//所有文件
提交历史记录
git commit "提交日志"
添加远程仓库地址
git remote add origin 仓库地址
推送提交
git push -u origin master (-u 会记住本次提交 下次提交直接git push 就相当于 git push origin master)

  • 有本地仓库

添加远程仓库地址
git remote add origin 仓库地址
推送提交
git push -u origin master

初始目录结构说明

初始目录结构.png

TypeScript 相关配置介绍

package.png dependencie依赖包.png
devDependencies依赖.png
shims-vue.d.ts.png
shims-tsx.d.ts.png options Api定义组件.png
class Api定义组件.png class api + vue-property-decorator.png

此处建议使用 Options APIs

Class语法只是一种写法,最终还是要转换为普通的组件数据结构,
装饰器语法没有正式定稿,正式发布后选择使用。
使用Options APIs最好使用 export default Vue.extend ({...}) 而不是 export default {...}

安装ElementUI组件库

  • npm i element-ui -S
    在 main.ts 中导⼊配置
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')

样式处理

样式文件结构.png

共享全局样式变量

向预处理器 Loader 传递选项

module.exports = {
 ...
 css: {
  loaderOptions: {
    sass: {
      prependData: `@import "~@/styles/variables.scss";`
    }
  }
 }
}

封装请求模块

安装axios

  • npm i axios
//request.ts
import axios from 'axios'

const request = axios.create({

})

export default request

发布部署

npm run build
生成打包后dist文件


本地预览打包后的dist.png

serve -s dist (history路由模式 使用加-s)

在vue.config.js配置的proxy代理只在开发环境中有用,打包后预览 需要自己编写本地预览服务

自己编写本地预览服务

  • 创建 Express 服务 npm i -D express
  • 托管 dist 目录
  • 配置 npm scripts 脚本命令:"preview":"node serve/app.js"
  • 配置 proxy 代理

serve/app.js

const express = require('express')
const app = express()
const path = require('path')
const { createProxyMiddleware } = require('http-proxy-middleware')

// 托管了 dist 目录,当访问 / 的时候,默认会返回托管目录中的 index.html 文件
app.use(express.static(path.join(__dirname, '../dist')))

app.use('/api', createProxyMiddleware({
  target: '代理地址',
  changeOrigin: true
}))

app.use('/xxx', createProxyMiddleware({
  target: '代理地址xxx',
  changeOrigin: true
}))

app.listen(3000, () => {
  console.log('running...')
})

npm run preview 可以本地预览服务了
该项目demo地址

相关文章

  • Vuejs+Vuex+TypeScript开发项目

    VueCLI创建项目 vue create my-project没安装vue-cli先安装vue-cli npm ...

  • 项目管理总结

    [TOC] 管理流程 快速迭代项目开发计划项目时间表待开发项目池开发中项目列表 每个迭代开发过程跟踪测试准备开发提...

  • 项目开发之经验分享

    项目开发之经验分享 项目开发之经验分享

  • Android交接文档

    项目简介: 项目实现的功能,目标 开发模式: MVP,MVC,MVVM等。 项目类型: 是否是混合开发等 开发环境...

  • Loveward官网

    项目介绍 项目名称:Loveward官网开发项目类型:Web开发开发周期:6个月项目简介:爱情守护所(www.lo...

  • 找开发|快速开发项目,就上找开发|程序员找项目,就上找开发|IT

    找开发|快速开发项目,就上找开发|程序员找项目,就上找开发|IT培训,技术交流,就上找开发 找开发

  • FDL官网

    项目介绍 项目名称:FDL官网开发项目类型:Web开发开发周期:1个月项目简介:Fintech深度研究室(www....

  • 项目开发

    基于 Vue 的 WebSocket 实时聊天实战项目 一个基于vue的,从前端到后端构建的项目。能让学到如何用,...

  • 项目开发

    Retrofit封装 RxJava 与 Retrofit 结合的最佳实践 flatmap统一处理异常 Rx处理服务...

  • 项目开发

    项目开发 1.登陆与后台的交互判断(token) ios的服务器端提供的对外访问的接口。不能像Web服务器开发那样...

网友评论

      本文标题:Vuejs+Vuex+TypeScript开发项目

      本文链接:https://www.haomeiwen.com/subject/tcemcrtx.html