vue项目基础配置

一、项目初始化创建

1.本地初始化

bash 切换到桌面 运行 vue init Webpack vue-demo 生成初始化vue项目

2.建立和码云的连接

我后来在github重新创建并引用了码云的项目,主要维护github,然后使用码云的强制更新关联GitHub的地址.

3.建立本地仓库

4.保存上传

二、项目初始化配置

1.服务器代理配置

  • config/index.js

  • config/dev.env.js

  • config/prod.env.js

2.axios封装

3.svg图标的引入

  1. 使用iconfont将采集好的矢量图下载下来导入到assets/font目录下
  2. 在 assets/css/index.css中引入@import ‘../font/iconfont.css’;
  3. 在 assets/font/iconfont.js头部加上/eslint-disable/解决eslint报错的问题
  4. 在main.js中引用import ‘./assets/js/iconfont’ svg字体彩色需要(如果不需要彩色字体的话,可以用另外两种方式,icon下载的demo有使用方法)
    这样就可以在项目中使用引入的图标了,引入的时候要注意设置icon的大小

4.vue-router的配置

  • 路由的基本配置

  • APP.vue

  • 登陆鉴权

  • 一级路由

5.vuex的配置

三、其他配置

1.sass(scss)的引入

  • 引入以上依赖之后,就可以在文件中使用scss了
  • scss的具体使用参考阮一峰老师的博客
  • sass教程
  • 但是如果想更加智能的使用scss需要进一步配置
  • 新建assets/css/mixin.scss存储scss函数以及全局变量等
    bUIld/utils.js

此时,全局变量都设置好了,可以在不同页面直接引用

2.基本配置CSS的引入

  • assets/css/index.scss // 统一管理css
  • assets/css/base.scss // 系统的基础设置
  • assets/css/rESET.scss // 基本样式的清除
    main.js中引入

3.vue-lazyload的配置

static中引入图片信息

4.vue-wechat-title 的使用

APP.vue

在路由的meta标签中设置title即可

5.vconsole的引入

vconsole github文档地址

vconsole的具体使用情况在文档中已经说得很清楚了.这里简单写一下

package.json

main.js

6.fastclick的引入

npm 文档

在main.js中

完成引用

7.UI插件的使用

8.骨架屏的配置

骨架屏参考
骨架屏注入

9.TPEScript配

10.SSR的配置

未经允许不得转载:一点博客-青梅煮码-共享博客 » vue项目基础配置
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏