vue 搭建新项目（必备插件）

• 1. 新建项目

vue init webpack 项目名称

接下来一切选项都选 N

• 2. 解决打包报错问题

build文件夹下 webpack.prod.conf.js

  module: {
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: false,        //此处改为 false
      usePostCSS: true
    })
  },

config文件下的 index.js

build: {
	...
	
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',        //加个点
    
    ...
 }

• 3. 兼容IE

安装

npm install babel-polyfill --save

main.js

import "babel-polyfill"

webpack.base.conf.js

module.exports = {

  // entry: {
  //   app: './src/main.js'
  // },
  
  entry: ['babel-polyfill', './src/main.js'],
}

• 4. 路由

1） 安装

cnpm install vue-router --save

2） 使用—新建router.js

import Vue from 'vue'
import VRouter from 'vue-router'

Vue.use(VRouter)

export default new VRouter ({
    routes: [
	    {  //重定向 打开页面后自动跳转到你定义的页面内
	        path: '/',
	        redirect:'/login'
	    },
	    {
	      path: '/login',
	      name:'login',
	      component: () => import('@/views/login'),
	      hidden: true
	    }
	]
  })

main.js

import router from '@/configs/router'

new Vue({
  ...,
  router,
  ...,
})

3）预留标签

<router-view></router-view>

4）跳转

<router-link :to="'组件路径'">跳转到**页</router-link>
this.$router.push({path: '/platform/pmp'});

• 5. vuex

安装

cnpm install vuex --save

使用

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    path: ''
  }
})

main.js

import store from '@/vuex/vuex'

new Vue({
  ...,
  store ,
  ...,
})

调用

this.$store.state.show

• 6. Less

安装

npm install less less-loader --save

修改webpack.base.conf.js文件  增加以下代码

{
	test: /\.less$/,
	loader: "style-loader!css-loader!less-loader",
},

使用

<style lang=”less”></style>

报错解决办法

Module build failed: TypeError: loaderContext.getResolve is not a function

less-loader版本太高，降低版本即可

• 7. axios

安装

npm install axios --save

main.js

import axios from 'axios'
Vue.prototype.$axios = axios

使用

this.$axios({
  method: 'post',
   url:  'intensive/getIntensiveList',
   params: {
  		name: value
   }
 }).then((res) => {

}))
}