nginx配置vue项目500_vue项目基础配置

一、项目初始化创建

1.本地初始化

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

2.建立和码云的连接

在Gitlab创建一个没有readme的空项目

3.建立本地仓库

打开第一步创建的项

git init <!-- 初始化git仓库 >
git remote add origin http://gitee.xxxx // 建立连接
 

4.保存上传

使用vscode自带的git工具进行保存，修改上传即可

二、项目初始化配置

1.服务器代理配置

• config/index.js

proxyTable

• config/dev.env.js

API_HOST: '"/api/"'
 

• config/prod.env.js

API_HOST: '"api.qmzm.io"'
 

2.axios封装

npm install axios --save

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的配置

• 路由的基本配置

import 

• APP.vue

<

• 登陆鉴权

router

• 一级路由

<!---->

5.vuex的配置

store
 |-actions.js
 |-getters.js
 |-index.js
 |-mutations.js
 |-mutations-types.js
 |-state.js
 

三、其他配置

1.sass(scss)的引入

"node-sass": "^4.8.3",
"sass-loader": "^6.0.7",
"sass-resources-loader": "^1.3.3",
 

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

return 

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

2.基本配置CSS的引入

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

import './assets/css/index.css' // 公用CSS
import './assets/js/rem.js' // rem适配

3.vue-lazyload

static中引入图片信息

npm 

4.vue-wechat-title 的使用

Vue.use(require('vue-wechat-title'))

APP.vue

<router-view v-wechat-title="$route.meta.title" img-set="/static/logo.png"></router-view>

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

5.vconsole的引入

vconsole github文档地址

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

package.json

> devDependencies
"vconsole": "^3.2.0"
npm install
 

main.js

/* eslint-disable */
import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole
let vConsole = new VConsole() // 初始化
 

6.fastclick的引入

npm 文档

npm install fastclick --save
 

在main.js中

import fastclick from 'fastclick'
 fastclick.attach(document.body)
 

完成引用

7.UI插件的使用

8.骨架屏的配置

骨架屏参考
骨架屏注入

9.TPEScript配置

10.SSR的配置