美文网首页
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开发项目

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