vue项目搭建与配置

1、vue init webpack project
2、cd project   
3、npm install    
4、npm run dev

2、安装less

1、npm install less less-loader --save-dev
2、接下来找到bulid目录下的webpack.base.conf.js并打开，找到module下的rules写下：
{
    test: /\.less$/,
    loader: "style-loader!css-loader!less-loader"
}

3、vue-cli中使用rem,vue自适应
借助px2rem 插件

1、npm install px2rem-loader lib-flexible --save 
2、在项目入口文件main.js中引入lib-flexible
	import 'lib-flexible/flexible.js'
3、在build下的 utils.js中，找到generateLoaders 方法，在这里添加 :
const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75
    }
  }
  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

4、axios的使用

1、安装axios：cnpm install axios
2、在main.js文件引入axios：import Axios from 'axios'
将axios全局挂载到VUE原型上：Vue.prototype.$http=Axios
3、如果是加载本地文件，在webpack.dev.conf.js添加
	const appData = require('../data.json')  // 加载本地json文件
	const seller = appData.seller // 获取对应本地数据
	before(app){
      app.get('/api/seller',(req,res)=>{
        res.json({
          errno:0,
          data:seller
        })
      }),
   }
  在需要的文件里直接调用
		axios.get('/api/seller').then((response) => {
    			response=response.data;
                if (response.errno === ERR_OK) {
                this.goods = response.data;
               }
    		}),
4、调用外部api:
get方法发送请求
//方法一传递参数
axios.get('https://cnodejs.org/api/v1/topics',{
      params: {                           //参数
        page: this.page,
        limit: this.limit,
      },
    }).then(res => {                   //请求成功后的处理函数     
      this.isLoading = false;
      this.items = res.data.data;
      console.log(this.items);   
    }).catch(err => {                 //请求失败后的处理函数   
      console.log(err)
    })
//方法二传递参数
axios.get('https://cnodejs.org/api/v1/topics?page=1&limit=15')

1、在命令行中输入npm run dev ，启动自己的vue项目，例：http://localhost:8080/#/seller，可以在谷歌浏览器预览
2、那么如何在手机端预览vue项目呢？WIN+R，输入cmd启动命令行工具，输入ipconfig查看本机ip
3、本机IP地址替换localhost，例如：http://192.168.1.49:8080/#/seller，预览效果不变
4、手机输入http://192.168.1.49:8080/#/seller，即可预览

解决vue-cli构建本地项目，无法通过本机ip访问的问题
问题
解决方式：
在 webpack.dev.conf.js 追加以下代码
const HOST = process.env.HOST || ‘0.0.0.0’;
然后重新启动