新建vue项目后的一些基操_vue创建好项目后怎么用

一、合适的工程目录

1.项目目录（项目目录可以灵活配置，只要不杂乱无章，能方便维护开发就没啥大问题）

Dist：打包后的文件夹，正常如果不去配置文件改打包出来的文件都在这里
Node_modules：项目的一些模块和插件
Public：vue-cli4后的项目首页都放在这里了，不放在根目录
Src：绝大部分的开发都是在这个文件夹里面进行
Api：请求接口统一存放，然后按需导出
Assets：静态资源，图片字体音频等
Components：放组件的地方
Layout：页面排版的格式组件
Mixin：将一些常用的功能代码模块写成mixin，按需导入
Plugins：自定义插件
Router：vue-router，路由文件
Store： vuex的相关文件
Styles：通用样式
Utils：工具类js文件，比如request.js，封装请求模块
Views：页面组件，也是组件的一种，稍微做了个区分
App.vue：项目的vue根文件，切换页面其实就在这里反复横跳

二、绑定全局变量，全局函数

最简单直接的方式，直接在全局文件中把数据绑定在vue对象的原型上

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Vant from 'vant';

// 全局变量
Vue.prototype.isApp = navigator.userAgent.indexOf("Html5Plus") > 0
// 全局函数
Vue.prototype.backPage = () => {
  router.go(-1)
};

1
2
3
4
5
6
7
8
9
10
11
12
13

三、如何配置开发环境跨域

在vue.config.js文件中加入以下的配置

devServer: {
    proxy: {
      '/api': {
        target: '你要跨域的地址',
        changeOrigin: true,
        pathRewrite: {
          '^/api' : ''
        }
      }
    }
  }
1
2
3
4
5
6
7
8
9
10
11

同时需要在全局封装axios的时候，配置baseURL的地址为 /api，因为这是重写地址的标志。

const service = axios.create({
    baseURL: '/api', 
    timeout: 15000 
  })
1
2
3
4

四、使用阿里云矢量图

首先从阿里云中把自己需要的图标加到一个项目中，然后可以用了就下载下来，如下：

得到一个文件压缩包后，将以下文件放在同一个文件夹中，如：

最后在在main.js中全局引入iconfont.css文件夹就大功告成，如果不把ttf,woff2文件拉到文件夹中，可能会在某些环境出现无法加载图标的情况。

import './assets/style/global.css';
import './assets/style/iconfont.css';
1
2

五、如何使用插件，实现页面的自适应

在package.json中引入以下几个插件，然后npm run install一下：

另外在根目录建一个.postcssrc.js 文件

// https://github.com/michael-ciniawsky/postcss-load-config

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    'autoprefixer': {
      overrideBrowserslist: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 37.5, // 根据自己的设计图来设置这个值，375px的设计图就37.5
      propList: ['*']
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

还有index.html中要配置一行meta标签

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
1

最后写页面的时候只要按照375px下设计图量出来的尺寸去开发就ok了。这样保存的时候就会自动去编译我们的css，将px单位统一转化为rem，同时会在根元素设置一个font-size值（rem这个单位尺寸就是根据根元素的font-size值去确定的），最后我们设置的px值就会与设备的大小挂钩起来。

六、如果做H5+App，还需要做后退监听

// 后退事件
    const that = this
    let isDouble = 0
    document.addEventListener('plusready', function () {
      if (plus) {
        plus.key.addEventListener('backbutton', function () {
          if (that.$route.fullPath == '/login' || that.$route.fullPath == '/') {
            isDouble+=1
            if (isDouble == 1) {
              plus.nativeUI.toast("双击退出程序");
            } else {
              plus.runtime.quit();
            }
            setTimeout(() => {
              isDouble = 0
            }, 500);
          } else {
            that.$router.go(-1)
          }
        }, false)
      }
    })```

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23