vue我的项目搭建过程
想用vue3+ts给本人搭一个网站
因为之前素来没有做过我的项目搭建的工作,所以想记录一下这个搭建过程
构建vue运行环境
这个很简略了,装置git,下载node,改npm源什么的
查看npm源
npm get registry
批改npm源
npm config set registry https://registry.npm.taobao.org
应用vue-cli创立一个vue我的项目
找个文件夹而后…
npm install -g @vue/cli
vue create 你的项目名称
而后呈现了一堆选项,按需抉择就好了
丰盛vue的我的项目文件构造
-
styles文件夹–>用来寄存scss或css款式文件
variables.scss –> 用来定义全局scss变量
main.scss –> 用来管制页面构造 -
common文件夹–>用来寄存专用的js
utils.js –> 常用工具类
request.js –> 封装申请库(axios) - api文件夹–>寄存接口申请
-
assets文件夹
新建images寄存图片
删除我的项目建设时的初始文件
components/HolloWord.vue什么的,通通删掉
初始化App.vue代码
装置一些依赖项
初始化浏览器款式
npm install normalize.css
Element-plus组件库
npm install element-plus --save
而后再main.ts里引入
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import 'normalize.css'
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App).use(store).use(router).use(ElementPlus).mount('#app')
引入全局scss变量
根目录上面新建vue.config.js
module.exports = {
css: {
loaderOptions: {
scss: {
prependData: `@import "~@/styles/variables.scss";`
}
}
}
}
建设Git仓库
我是再gitee上新建了仓库,本人的账号里配置ssh密钥
git remote add origin 我的项目地址
创立dev分支,而后把我的项目推上去就好了
平时就在dev上开发