vue流程搭建项目

第一模块

npm install -g vue-cli

1.创建项目

vue init webpack buying(项目文件夹名)

2.安装依赖

cd buying

npm i

3.安装第三方插件

3.1请求：npm install axios --save

css编译器：npm install stylus

css:npm install stylus stylus-loader style-loader --save-dev

3.2为了解决post默认使用的是x-www-from-urlencoded 去请求数据，导致请求参数无法传递到后台，所以还需要安装一个插件QS

npm i qs

3.3移动端适配插件lib-flexible

npm i lib-flexible --save-dev

用法：在main.js中引入lib-flexible

import 'lib-flexible/flexible'

3.4安装px2rem loader

npm install px2rem-loader --save-dev

用法：配置px2rem-loader

在build文件中找到util.js，将px2rem-loader添加到cssLoaders中，

如：

const cssLoader = {

    loader: 'css-loader',

    options: {

      minimize: process.env.NODE_ENV === 'production',

      sourceMap: options.sourceMap

    }

  }

  const px2remLoader = {

    loader: 'px2rem-loader',

    options: {

      remUnit: 75

    }

  }

同时，在generateLoaders方法中添加px2remLoader

function generateLoaders (loader, loaderOptions) {

    const loaders = [cssLoader,px2remLoader]

    if (loader) {

      loaders.push({

        loader: loader + '-loader',

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

          sourceMap: options.sourceMap

        })

      })

    }

3.5滑动

npm install swiper --save-dev

用法

import Swiper from 'swiper';

import 'swiper/dist/css/swiper.min.css';

3.6上啦刷新下拉加载

npm install better-scroll --save-dev

用法

import Scroll from '@/components/scroll/scroll'

export default {

  components: {

    Scroll

  },

}

启动

npm run dev

打包

npm run build

空格报错解决

在webpack.base.conf.js注释掉下面那一行

module: {

    rules: [

      // ...(config.dev.useEslint ? [createLintingRule()] : []),

      {

        test: /\.vue$/,

        loader: 'vue-loader',

        options: vueLoaderConfig

      },

}