Vuejs+Vuex+TypeScript开发项目

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地址