VueCLI創(chuàng)建項(xiàng)目
vue create my-project
沒(méi)安裝vue-cli先安裝vue-cli
- npm i -g @vue/cli
加入Git版本管理
- 創(chuàng)建遠(yuǎn)程倉(cāng)庫(kù)
- 將本地倉(cāng)庫(kù)推到線上
- 沒(méi)有本地倉(cāng)庫(kù)：
創(chuàng)建本地倉(cāng)庫(kù)
git init
將文件添加到暫存區(qū)
git add 文件 （git add . ）//所有文件
提交歷史記錄
git commit "提交日志"
添加遠(yuǎn)程倉(cāng)庫(kù)地址
git remote add origin 倉(cāng)庫(kù)地址
推送提交
git push -u origin master （-u 會(huì)記住本次提交 下次提交直接git push 就相當(dāng)于 git push origin master）
- 有本地倉(cāng)庫(kù)
添加遠(yuǎn)程倉(cāng)庫(kù)地址
git remote add origin 倉(cāng)庫(kù)地址
推送提交
git push -u origin master
初始目錄結(jié)構(gòu)說(shuō)明
TypeScript 相關(guān)配置介紹
此處建議使用 Options APIs
Class語(yǔ)法只是一種寫(xiě)法，最終還是要轉(zhuǎn)換為普通的組件數(shù)據(jù)結(jié)構(gòu)，
裝飾器語(yǔ)法沒(méi)有正式定稿贤惯，正式發(fā)布后選擇使用。
使用Options APIs最好使用 export default Vue.extend ({...}) 而不是 export default {...}
安裝ElementUI組件庫(kù)
- npm i element-ui -S
在 main.ts 中導(dǎo)?配置
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')
樣式處理
共享全局樣式變量
module.exports = {
...
css: {
loaderOptions: {
sass: {
prependData: `@import "~@/styles/variables.scss";`
}
}
}
}
封裝請(qǐng)求模塊
安裝axios
- npm i axios
//request.ts
import axios from 'axios'
const request = axios.create({
})
export default request
發(fā)布部署
npm run build
生成打包后dist文件
serve -s dist (history路由模式 使用加-s)
在vue.config.js配置的proxy代理只在開(kāi)發(fā)環(huán)境中有用觉至，打包后預(yù)覽 需要自己編寫(xiě)本地預(yù)覽服務(wù)
自己編寫(xiě)本地預(yù)覽服務(wù)
- 創(chuàng)建 Express 服務(wù) 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 目錄谷誓，當(dāng)訪問(wèn) / 的時(shí)候，默認(rèn)會(huì)返回托管目錄中的 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 可以本地預(yù)覽服務(wù)了
該項(xiàng)目demo地址
