Vue的移动端应用环境搭建

1、安装webpack

npm install webpack -g


2、安装Cli

npm install -g @vue/cli


2、创建项目

cd到项目文件夹下

vue init webpack 项目名

项目名小写不要驼峰不要大写,可用 - 间隔单词

创建成功后运行下看看

cd 项目名

npm run dev

成功后,网页打开http://localhost:8080,看到欢迎页。


3、webstorm打开工程,开始配置。

设置运行命令快捷按钮,顶部工具栏Add Configuration... > + > npm > Scriptes里填dev > OK

点绿色运行按钮,运行成功。


4、配置ESlint警告和报错


5、Vuex(状态管理)

安装

npm install vuex --save

在main.js里引入

import Vuex from 'vuex'

Vue.use(Vuex)


6、Axios(数据请求模块)

安装

npm install axios js-cookie --save

添加api(请求模块)、apiconfig(公共请求封装)文件夹

在apiconfig里创建index.js文件,内容如下,里面按需配置(如请求成功、数据格式等)

/* eslint-disable */

import axios from 'axios'

/**

* 定义请求常量

*/

export const baseUrl = "http://192.168.1.220:8001/api/update.ashx";

// 请求超时时间

axios.defaults.timeout = 2000;

// 请求拦截

axios.interceptors.request.use(

  config => {

    // 在发送请求之前做些什么

    return config

  },

  error => {

    // 对请求错误做些什么

    return Promise.reject(error)

  }

)

// 响应拦截

axios.interceptors.response.use(

  response  => {

    // 对响应数据做点什么

    let {data} = response;

    if(response.config.url == baseUrl){

      return Promise.resolve(data.result);

    }else if(!data.Result){

      // 服务器错误处理

      return Promise.reject(data.Message);

    }else{

      return Promise.resolve(data.Data);

    }

  },

  error => {

    // 对响应错误做点什么

    return Promise.reject(error)

  }

)

// 封装post请求

export function fetch(requestUrl, params = '') {

  return axios({

    url: requestUrl,

    method: 'post',

    data: {

      'body': params

    }

  })

}

为了在使用的文件中简写apiconfig和api文件地址,在build/webpack.base.conf.js的resolve.alias添加代码

'config': resolve('src/apiconfig'),//添加的代码

'api': resolve('src/api'),//添加的代码

跨域问题在config/index.js中配置

assetsSubDirectory: 'static',

assetsPublicPath: '/',

proxyTable: {

    '/root/':{target: 'http://xxx'} //添加的代码

},


7、Less

安装

npm install less less-loader --save-dev

配置

在build/webpack.base.conf.js 的module.exports.module.rules 里面添加

{

    test: /\.less$/,

    loader: 'style-loader!css-loader!less-loader',

}


8、移动端适配

(1)flexible

安装

npm i lib-flexible --save

在main.js里引入

import 'lib-flexible/flexible'

(2)px2rem-loader

安装

npm install px2rem-loader

配置,在build/util.js里修改

// 添加的代码

    const px2remLoader = {

        loader: 'px2rem-loader',

        options: {

          remUnit: 75 // 这里设置html根字体,vant-UI的官方根字体大小是37.5

        }

    }

    // generate loader string to be used with extract text plugin

    function generateLoaders (loader, loaderOptions) {

        const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader, px2remLoader]// 添加的代码

        if (loader) {

            loaders.push({

                loader: loader + '-loader',

                options: Object.assign({}, loaderOptions, {

                    sourceMap: options.sourceMap

                })

            })

        }

        // Extract CSS when that option is specified

        // (which is the case during production build)

        if (options.extract) {

            return ExtractTextPlugin.extract({

                use: loaders,

                fallback: 'vue-style-loader'

            })

        } else {

            return ['vue-style-loader'].concat(loaders)

        }

    }


9、UI框架,Vant

安装

npm i vant -S

在main.js里添加

import Vant from 'vant';

import 'vant/lib/index.css';

Vue.use(Vant)


10、页面切换


11、其他优化

(1)fastclick,解决点击事件300ms延迟

安装

npm install fastclick --save

在main.js中引入

import FastClick from 'fastclick'

FastClick.attach(document.body)

你可能感兴趣的:(Vue的移动端应用环境搭建)