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版本管理
- 创建远程仓库
- 将本地仓库推到线上
- 没有本地仓库：
创建本地仓库
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
共享全局样式变量
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地址
