乐趣区

关于前端:vue项目搭建过程

jiezi

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 上开发

退出移动版