vue项目实战：实战技巧总结

vue init webpack project

npm install

npm run dev

 vue create project

TypeScript 支持使用 TypeScript 书写源码
 Progressive Web App (PWA) Support PWA 支持。
 Router 支持 vue-router 。
 Vuex 支持 vuex 。
 CSS Pre-processors 支持 CSS 预处理器。
 Linter / Formatter 支持代码风格检查和格式化。
 Unit Testing 支持单元测试。
 E2E Testing 支持 E2E 测试。

 cd  project

 npm run serve

npm i element-ui -S

import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Element)

npm install babel-plugin-component -D

{
	"presets": [
		["es2015", {
			"modules": false
		}]
	],
	"plugins": [
		[
			"component",
			{
				"libraryName": "element-ui",
				"styleLibraryName": "theme-chalk"
			}
		]
	]
}

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);

- Vue.use(Button)
- Vue.use(Select)

npm i vuex -s

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

//挂载 Vuex
Vue.use(Vuex)

//创建 VueX 对象
const store = new Vuex.Store({
state:{name: 'helloVueX',
},
mutations:{},
actions:{},
modules:{}
})

export default store

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
el: '#app',
router,
store, //store:store 和 router 一样，将我们创建的 Vuex 实例挂载到这个 vue 实例中
render: h => h(App)
})

<template>
    <div id='app'>
      name:
      <h1>{{ $store.state.name }}</h1>
    </div>
</template>

methods:{
  add(){
      console.log(this.\$store.state.name)
    }
},

npm install node-sass sass-loader --save-dev 

{
  test: /\.scss\$/,
  loaders: ['style', 'css', 'sass']
} 

<style lang='scss'>
  
</style>

npm install sass-resources-loader --save-dev 

scss: generateLoaders('sass').concat({
	loader: 'sass-resources-loader',
	options: {
		//你自己的 scss 全局文件的路径
		resources: path.resolve(\_\ _dirname, '../src/style/common.scss')
	}
})

//配置 sass 编译路径

function generateSassResourceLoader() {
	let loaders = [
		cssLoader,
		'sass-loader',
		{
			loader: 'sass-resources-loader',
			options: {
				// 多个文件时用数组的形式传入，单个文件时可以直接使用 path.resolve(__dirname, '../static/style/common.scss'
				resources: path.resolve(__dirname, '../src/style/common.scss')
			}
		}
	];
	if (options.extract) {
		return ExtractTextPlugin.extract({
			use: loaders,
			fallback: 'vue-style-loader'
		});
	} else {
		return ['vue-style-loader'].concat(loaders);
	}
}

sass:generateSassResourceLoader(),//新加的
scss:generateSassResourceLoader(),//新加的

npm install --s node-sass sass-loader

npm install --s sass-resources-loader 

Module build failed: TypeError: this.getResolve is not a function at Object.loader 

安装node-scss报错

npm install node-sass --save-dev //安装 node-sass
npm install sass-loader --save-dev //安装 sass-loader
npm install style-loader --save-dev //安装 style-loader

将 "sass-loader": "^8.0.0"，更换成了 "sass-loader": "^7.3.1",

npm uninstall sass-loader

npm install sass-loader@7.3.1 --save-dev

npm install less less-loader --save

// 此种方法在控制台中标签样式显示的是style标签样式
{
	test: /\.less$/,
	loader: "style-loader!css-loader!less-loader",
}

// 可以在控制台中看到当前标签样式来自于哪个less文件
{
	test: /\.less$/,
	loader: "style-loader!css-loader!less-loader",
	options: {
		sourceMap: true
	}
}

npm install font-awesome --save

<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />

webpack.dev.conf.js
new HtmlWebpackPlugin({
		filename: 'index.html',
		template: 'index.html',
		favicon: 'favicon.ico', // 新增
		inject: true
	}),

	webpack.prod.conf.js
new HtmlWebpackPlugin({
	filename: config.build.index,
	template: 'index.html',
	inject: true,
	minify: {
		removeComments: true,
		collapseWhitespace: true,
		removeAttributeQuotes: true
		// more options:
		// https://github.com/kangax/html-minifier#options-quick-reference
	},
	// necessary to consistently work with multiple chunks via CommonsChunkPlugin
	chunksSortMode: 'dependency',
	favicon: 'favicon.ico' // 新增
}),

import 'bootstrap/dist/css/bootstrap.css' //引入 bootstrap
import 'bootstrap-vue/dist/bootstrap-vue.css'
import '@/common/common.css'
import '@/common/index.css'

const port = () => import('@/pages/port') //入口页面、

const router = new Router({
  // mode: 'history',
  routes: [
    {
      path: '/',
      name: 'port',
      component: resolve => require.ensure([], () => resolve(require('@/pages/port')), 'port'),
    }]
})

Vue.prototype.isMobile = function() {
	let flag = navigator.userAgent.match(
		/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
	)
	return flag;
}

mounted: function() {
  this.isMobile();
}

// 接口暴露在全局
import { server } from './config/api'
Vue.prototype.\$server = server;

//api.js

export const server = {
getContentMenu: (paramObj)=>fetch('/content/menu',paramObj),//内容详情查询
getContentListPort: (paramObj)=>fetch('/content/list/'+paramObj),//入口页面接口
getContentList:(paramObj)=>fetch('/content/list/'+paramObj),//内容详情查询
getPageviews:(paramObj)=>fetch('/webpage/1/view',paramObj)//流量统计接口
}

组件里面使用：
```js

getPageviews() {

	var that = this;

	let params = {

		pageId: that.pageId,

		pageUrl: that.pageUrl,

	};

	that.\$server.getPageviews(params).then(response => {})

}

#####  11.2 **axios** 方法封装，整个 **api.js**

```js

config.data = JSON.stringify(config.data);

config.headers = {

  'Content-Type':'application/x-www-form-urlencoded'

}

return config;

return Promise.reject(err);

return response

if (err && err.response) {

  switch (err.response.status) {

    case 400:

        console.log('错误请求')

      break;

    case 401:

        console.log('未授权，请重新登录')

      break;

    case 403:

      console.log('拒绝访问')

      break;

    case 404:

      console.log('请求错误,未找到该资源')

      break;

    case 405:

      console.log('请求方法未允许')

      break;

    case 408:

      console.log('请求超时')

      break;

    case 500:

      console.log('服务器端出错')

      break;

    case 501:

      console.log('网络未实现')

      break;

    case 502:

      console.log('网络错误')

      break;

    case 503:

      console.log('服务不可用')

      break;

    case 504:

      console.log('网络超时')

      break;

    case 505:

      console.log('http版本不支持该请求')

      break;

    default:

      console.log(`连接错误${err.response.status}`)

  }

} else {

  console.log('连接到服务器失败')

}

return Promise.resolve(err.response)

axios.get(url,{

  params:params

})

.then(response => {

  resolve(response.data);

})

.catch(err => {

  reject(err)

})

 axios.post(url,data)

      .then(response => {

        resolve(response.data);

      },err => {

        reject(err)

      })

getContentMenu: (paramObj)=>fetch('/content/menu',paramObj),//内容详情查询

getContentListPort: (paramObj)=>fetch('/content/list/'+paramObj),//入口页面接口

getContentList:(paramObj)=>fetch('/content/list/'+paramObj),//内容详情查询

getPageviews:(paramObj)=>fetch('/webpage/1/view',paramObj)//流量统计接口

## 十二、provide /inject 完美解决不跳转不闪动页面刷新

原理：此方法使用的是 v-if 来控制 router-view 的显示或隐藏，v-if 从 false 变为 true 时，vue 会重新渲染 router-view 区域，所以当参数变化时，只需让 v-if 从 true => false => true,就能实现页面刷新。

##### 12.1 找到route-view
```js

  <div id="app">

    <router-view v-if="isRouterAlive"/>

  </div>

export default {

  name: 'App',

  provide() {

    return {

      reload: this.reload//调用reload方法

    }

  },

  data() {

    return {

      isRouterAlive: true//一开始router-view为true

    }

  },

  methods: {

    reload() {

      this.isRouterAlive = false

         //在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM

      this.$nextTick(() => {

        this.isRouterAlive = true

      })

    }

  }

}

#####  12.2在页面操作
```js

export default {

  name: 'newproduct',

  inject:['reload'],//在export default下面加上这一段

  method:{

    //调用App.vue下的this.reload()方法，来改变v-if的状态

    clickDiv(){//刷新按钮调用的方法

      this.reload()

    }

  }

[参考文档：如何实现 vue 中不跳转不闪动页面刷新？provide /inject 完美解决方案](https://segmentfault.com/a/1190000018875444)

## 十三、vue动态绑定 class

#####  13.1 对象方法
```js

  
#### 13.2 判断是否绑定一个active
```js

:class="{ 'active': isActive, 'sort': isSort }"

:class="classObject"
data() {
	return {
		classObject: {
			active: true,
			sort: false
		}
	}
}

:class="classObject"
data() {
		return {
			isActive: true,
			isSort: false
		}
	},
	computed: {
		classObject: function() {
			return {
				active: this.isActive,
				sort: this.isSort
			}
		}
	}

:class="[isActive,isSort]"

data() {
	return {
		isActive: 'active',
		isSort: 'sort'
	}
}

:class="[isActive?'active':'']"

:class="[isActive==1?'active':'']"

:class="[isActive==index?'active':'']"

:class="[isActive==index?'active':'otherActiveClass']"

:class="[{ active: isActive }, 'sort']"

:class="[{ active: isActive==1 }, 'sort']"

:class="[{ active: isActive==index }, 'sort']"

<div id="app">
    <text-component :class="{'isStrong':isStrong}"></text-component>
</div>

<script>
    Vue.component('text-component', {
        template: '<p class="content">不懂基因测序的学霸不是好的人工智能公司 CEO</p>'
    });
    var app = new Vue({
        el: '#app',
        data: {
            isStrong: true
        }
    });
</script>

<span v-bind:style="{'display':config.isHaveSearch ? 'block':'none'}" >动态绑定样式</span>

<div id="app">
    <div :style="border"></div>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            border:{
                border:'1px solid #00F',
                textShadow:'0 0 .3em gray'
            }
        }
    });
</script>

<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

var vm = new Vue({
	el: '#app',
	data: {
		name: 'Google',
		url: 'http://www.google.com'
	},
	computed: {
		site: {
			// getter
			get: function() {
				return this.name + ' ' + this.url
			},
			// setter
			set: function(newValue) {
				var names = newValue.split(' ')
				this.name = names[0]
				this.url = names[names.length - 1]
			}
		}
	}
})

// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = 'http://www.runoob.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);

<style>
.active {
    width: 100px;
    height: 100px;
    background: green;
}
</style>

<div id="app">
  <div v-bind:class="{ active: isActive }"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true
  }
})
</script>

<style>
.active {
    width: 100px;
    height: 100px;
    background: green;
}
.text-danger {
    background: red;
}
</style>

<div id="app">
  <div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
  </div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true,
    hasError: true
  }
})
</script>

<style>
.active {
    width: 100px;
    height: 100px;
    background: green;
}
.text-danger {
    background: red;
}
</style>

<div id="app">
  <div v-bind:class="classObject"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    classObject: {
      active: true,
      'text-danger': true
    }
  }
})
</script>

<style>
.active {
    width: 100px;
    height: 100px;
    background: green;
}
.text-danger {
    background: red;
}
</style>

<div id="app">
  <div v-bind:class="classObject"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
  isActive: true,
  error: null
  },
  computed: {
    classObject: function () {
      return {
        active: this.isActive && !this.error,
        'text-danger': this.error && this.error.type === 'fatal',
      }
    }
  }
})
</script>

<style>
.active {
    width: 100px;
    height: 100px;
    background: green;
}
.text-danger {
    background: red;
}
</style>

<div id="app">
    <div v-bind:class="[activeClass, errorClass]"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
})
</script>

<style>
.text-danger {
    width: 100px;
    height: 100px;
    background: red;
}
.active {
    width: 100px;
    height: 100px;
    background: green;
}
</style>

<div id="app">
    <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true,
    activeClass: 'active',
    errorClass: 'text-danger'
  }
})
</script>

<div id="app">
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    activeColor: 'green',
    fontSize: 30
  }
})
</script>

<div id="app">
  <div v-bind:style="styleObject">菜鸟教程</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    styleObject: {
      color: 'green',
      fontSize: '30px'
    }
  }
})
</script>

<div id="app">
  <div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    baseStyles: {
      color: 'green',
      fontSize: '30px'
    },
    overridingStyles: {
      'font-weight': 'bold'
    }
  }
})
</script>

    <template>
      <div class="childA-wrapper">
        子组件A
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          childA: '我是组件A传过来的值'
        }
      },
      created: function() {},
      mounted() {
        this.sendDataParent()
      },
      methods: {
        sendDataParent() {
          // getChildDataA是在父组件on监听的方法
          // 第二个参数this.childA是需要传的值
          this.$emit('getChildDataA', this.childA)
        }
      }
    }
    </script>

  <template>
  <div class="childB-wrapper">
    子组件B
  </div>
</template>

<script>
export default {
  data() {
    return {
      childB:'我是组件B传过来的值'
    }
  },
  created:function() {
  },
  mounted(){
    this.sendDataParent()
  },
  methods: {
   sendDataParent() {
        // getChildDataB是在父组件on监听的方法
        // 第二个参数this.childB是需要传的值
        this.$emit('getChildDataB', this.childB)
      }
  }
}
</script>

  <template>
        <div>
            <v-childA v-on:getChildDataA="getChildDataA"></v-childA>
            <v-childB v-on:getChildDataB="getChildDataB"></v-childB>
            <div>获取组件A传过来的值:{{childAValue}}</div>
            <div>获取组件B传过来的值:{{childBValue}}</div>
        </div>
    </template>

    <script>
    import childA from '@/components/childA.vue'
    import childB from '@/components/childB.vue'
    export default {
      data() {
        return {
            childAValue:'',
            childBValue:'',
        }
      },
      methods: {
       getChildDataA(childA){
        console.log(childA)
        this.childAValue=childA
       },
       getChildDataB(childB){
        console.log(childB)
        this.childBValue=childB
       }
      },
      components: { 'v-childA': childA, 'v-childB': childB}
    }
    </script>

<template>
        <div>
            <v-childA></v-childA>
            <v-childB  :sendBData="sendB"></v-childB>
        </div>
    </template>

    <script>
    import childA from '@/components/childA.vue'
    import childB from '@/components/childB.vue'
    export default {
      data() {
        return {
            sendB:'父组件向B组件传递的参数'
        }
      },
      methods: {
      },
      components: { 'v-childA': childA, 'v-childB': childB}
    }
    </script>

<template>
  <div class="childB-wrapper">
    子组件B:{{sendBData}}
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  created: function() {},
  mounted() {},
  methods: {},
  props: {
    sendBData: String,
    required: true
  }
}

</script>

  import Vue from 'vue'
  export default new Vue()

<template>
    <div class="childB-wrapper">
    </div>
  </template>
  <script>
  import Bus from '@/common/bus.js'
  export default {
    data() {
      return {
        childB: '我是组件B的内容'
      }
    },
    created: function() {},
    mounted() {
      this.elementByValue()
    },
    methods: {
      elementByValue: function () {
          Bus.$emit('val', this.childB)
        }
    }
  }

  </script>

##### 组件 childA：

  <template>
      <div class="childA-wrapper">
        A组件：<span>{{childB}}</span>
      </div>
    </template>
    <script>
    import Bus from '@/common/bus.js'
    export default {
      data() {
        return {
          childB: ''
        }
      },
      created: function() {},
      mounted() {
        var that = this
        // 用 $on事件来接收参数
        Bus.$on('val', (data) => {
          console.log(data)
          that.childB = data
        })
      }
    }

    </script>

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
const webpackConfig = merge(baseWebpackConfig, {
	plugins: [
		// vue-cli 生成的配置就有了
		new HtmlWebpackPlugin({
			filename: config.build.index,
			template: 'index.html',
			inject: true,
			minify: {
				removeComments: true,
				collapseWhitespace: true,
				removeAttributeQuotes: true
			},
			chunksSortMode: 'dependency'
		}),
		// 配置 PrerenderSPAPlugin
		new PrerenderSPAPlugin({
			// 生成文件的路径，也可以与 webpakc 打包的一致。
			staticDir: path.join(\_\ _dirname, '../dist'),

			// 对应自己的所有路由文件，比如 index 有参数，就需要写成 /index/param1。这个其实不需要；千万不要加'/'这个 嵌套路由得 commonquestion 直接写即可
			routes: ['index', '...', '/commonQuestion', '/commonQuestion/questionList', '/commonQuestion/questionDetailInfo'],
			// ；
			renderer: new Renderer({
				inject: { // 可选；最好还是用
					foo: 'bar'
				},
				headless: false, // 可选；最好用
				renderAfterTime: 5000, // 通过实践是必选 官网说可选有误 一定要必选
				renderAfterDocumentEvent: 'render-event' // 可选；最好用
			})
		}),
	]
})

 mode:‘history’,

    修改config/index.js 中的build的 assetsPublicPath: ‘/’ ；不然会导致刷新页面路径错乱导致样式或者js丢失；

    修改main.js

    new Vue({
      el: '#app',
      router,
      store,				// 如果需要了切记引入啊   切记需要挂载的全部挂载上去
      render: h => h(App),
      mounted () {
        document.dispatchEvent(new Event('render-event'))
      }
    })

const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');
module.exports = {
	configureWebpack: config => {
		if (process.env.NODE_ENV !== 'production') return;
		return {
			plugins: [
				new PrerenderSPAPlugin({
					// 生成文件的路径，也可以与 webpakc 打包的一致。
					// 下面这句话非常重要！！！
					// 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
					staticDir: path.join(\_\ _dirname, 'dist'),
					// 对应自己的路由文件，比如 a 有参数，就需要写成 /a/param1。
					routes: ['/', '/product', '/about'],
					// 这个很重要，如果没有配置这段，也不会进行预编译
					renderer: new Renderer({
						inject: {
							foo: 'bar'
						},
						headless: false,
						renderAfterTime: 5000, // 必选哈
						// 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
						renderAfterDocumentEvent: 'render-event'
					})
				}),
			],
		};
	}
}

new Vue({
	router,
	store,
	render: h => h(App),
	mounted() {
		document.dispatchEvent(new Event('render-event'))
	}
}).\$mount('#app')

vue-meta-info 

npm install vue-meta-info --save

import Vue from 'vue'
import MetaInfo from 'vue-meta-info'

Vue.use(MetaInfo)

<template>
  ...
</template>

<script>
  export default {
    metaInfo: {
      title: 'My Example App', // set a title
      meta: [{                 // set meta
        name: 'keyWords',
        content: 'My Example App'
      }]
      link: [{                 // set link
        rel: 'asstes',
        href: 'https://assets-cdn.github.com/'
      }]
    }
  }
</script>

<template>
  ...
</template>

<script>
  export default {
    name: 'async',
    metaInfo () {
      return {
        title: this.pageName
      }
    },
    data () {
      return {
        pageName: 'loading'
      }
    },
    mounted () {
      setTimeout(() => {
        this.pageName = 'async'
      }, 2000)
    }
  }
</script>

<meta name="参数" content="具体的描述">

<meta name="keywords" content="XX网，汽车，车主，评选">

说明：用于告诉搜索引擎，你网站的主要内容。

<meta name="description" content="汽车评选，XX网，评选，汽车">

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

说明：robots 用来告诉爬虫哪些页面需要索引，哪些页面不需要索引。
content 的参数有 all,none,index,noindex,follow,nofollow。默认是 all。

<meta name="robots" content="none">

1.none : 搜索引擎将忽略此网页，等价于 noindex，nofollow。
2.noindex : 搜索引擎不索引此网页。
3.nofollow: 搜索引擎不继续通过此网页的链接索引搜索其它的网页。
4.all : 搜索引擎将索引此网页与继续通过此网页的链接索引，等价于 index，follow。
5.index : 搜索引擎索引此网页。
6.follow : 搜索引擎继续通过此网页的链接索引搜索其它的网页。

<meta name="author" content="Lxxyx,841380530@qq.com">

<meta name="generator" content="Sublime Text3">

<meta name="copyright" content="Lxxyx"> //代表该网站为Lxxyx个人版权所有。

<meta name="revisit-after" content="7 days" >

<meta name="renderer" content="webkit"> //默认webkit内核
<meta name="renderer" content="ie-comp"> //默认IE兼容模式
<meta name="renderer" content="ie-stand"> //默认IE标准模式

<meta http-equiv="参数" content="具体的描述">

<meta http-equiv="content-Type" content="text/html;charset=utf-8">  //旧的HTML，不推荐
<meta charset="utf-8"> //HTML5设定网页字符集的方式，推荐使用UTF-8

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="Cache-Control" content="no-siteapp" />

<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />

<meta http-equiv="refresh" content="2；URL=http://www.lxxyx.win/"> //意思是2秒后跳转向我的博客

<meta http-equiv="Set-Cookie" content="name, date"> //格式
<meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"> //具体范例