子非鱼博客

近几年VUE、React、Angular等一系列框架非常流行，近期公司的项目也准备全面投入VUE的怀抱，所以趁着这次机会开始了对VUE的学习。
每种技术在学习之初总是让人痛苦的，遇到的各种问题都需要去查资料。并且因技术的更新迭代速度较快，查到的资料很多已经过时，根本不能解决问题，特整理出了这篇文章。在方便自己以后查询的同时也希望能对大家有所帮助。

搭建开发环境

安装nodejs(Javascript运行环境)。

对于nodejs的安装没什么可说的，如果你是windows系统，直接到官网去下载对应的安装包，然后一直"NEXT"就可以了。NodeJS官网传送门

安装npm(NodeJS包管理和分发工具)。

现在的nodejs是集成了npm的，在安装nodejs时npm也一并安装好了。所以这一步可以直接跳过。

查看npm版本命令：npm -v

升级npm到最新版：npm install -g npm

npm清除缓存：npm cache clean --force

安装webpack

什么是Webpack？
        WebPack可以看做是模块打包机。它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（less，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

Webpack安装命令：npm install webpack -g

安装vue-cli脚手架

vue-cli是用来生成模板的Vue工程。安装命令为：npm install vue-cli -g

创建项目

在硬盘上找一个文件夹放工程用的，在终端中进入该目录。

cd 目录路径
vue init webpack 工程名字 <工程名字不能用中文>

会有一些初始化的设置，直接回车默认

安装项目依赖

cd命令进入创建的工程目录：cd 工程名字
安装项目依赖：npm install

启动项目

命令：npm run dev

项目打包

命令：npm run build

实际开发中的常见问题及其他配套插件安装

url地址栏带#号问题

按照上面的步骤安装，启动项目后你会发现在地址栏中有个#号，如：http://localhost:8080/#/。这并不是我们希望的，此问题的解决办法如下：

找到工程项目下边的/src/router/index.js这个文件(配置路由的js文件)，在new Router()的参数中加上mode: 'history'即可。

书写不规范引起报错

我在最开始接触vue时遇到过这样的问题，在.vue文件中写js代码时报错了。如图：

这种情况是因为在创建项目时配置了ESLint引起的

ESLint默认规则不允许在每行最后加;，不允许使用Tab缩进等。
这种问题解决办法有：1、严格按照规范书写，习惯了就好。2、创建项目时关闭ESLint
如果创建项目时已经开启了ESLint，又想关闭它，可以编辑文件/build/webpack.base.conf.js，注释掉js检测部分

新建的项目配置文件中没找到上面的代码，只找到这个？ OK，那只需要把config.dev.useEslint改为false就可以了

config.dev.useEslint也没找到？ 看看有没有vue.config.js文件，里面是否有lintOnSave属性，把lintOnSave改为false即可

安装less/sass依赖

命令：npm install less less-loader --save-dev

命令：npm install sass-loader node-sass --save-dev

关于--save-dev 和 --save的区别：传送门

使用方法(所有引用文件的相对路径哪怕就是当前目录也要加上./才行)：

<style lang="less">
.box {
  width: 100px;
  height: 100px;
  > span {
    display: block;
  }
}
</style>

或

<style lang="less" src="./assets/test.less"></style>

或

<script>
import './assets/test.less'
</script>

切换页面后修改页面标题

安装命令：npm install vue-wechat-title

在路由配置文件(/src/router/index.js)中实例化参数，并在每个路由地址下标明对应的页面标题。

在入口vue文件处加上一个设置标题的div

安装网络请求模块(推荐axios)

命令：npm install axios --save

在入口js文件中引入模块，并注册为全局函数

在组件中使用

axios默认按照json格式提交，Content-Type为application/json。如果想改为一般的表单提交格式需要以下处理

import axios from 'axios';
import qs from 'qs';
var data = {age: 18};
var url = '';
axios.post(url, qs.stringify(data), {
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).then(result => {
    // do something
}) 

Axios 中文说明：传送门

watch监听

普通的watch

对于普通的监听我们只需在watch里写对应的监听函数即可。函数名与变量名相同，如图：

对象的watch

监听对象是否有变化，我们如果向普通变量那样监听会发现根本没有监听到变化。vue的官网上已经告诉我们了，对于对象、数组我们需要进行深度监听(deep: true)。不管是对象中的哪个属性值有变化都会触发对象的监听事件。

对象具体属性的watch

对于普通监听和对象监听我们知道要怎么做了，但如果监听的变量是对象中的某个属性呢？我们希望只有对象中的某个属性变化时才触发监听事件，这时则可以利用计算属性computed做中间层。computed中的函数名和watch中的函数名相同。

立即执行watch绑定的方法

对于有的watch方法，我们除了在数据变化时执行相应的方法外可能在刚进页面的时候也需要执行一次对应的方法，这时我们在watch中就可以设置immediate: true。immediate表示watch绑定好方法后无需数据变化先执行一次绑定的方法。

一些比较好的VUE组件库资源

Elemen：传送门

补充说明

还原组件的初始值

Object.assign(this.$data, this.$options.data())

vue-cli3创建项目

安装：npm install -g @vue/cli

命令：vue create 项目名

vue-cli3删除eslint验证

1.删除package.json中的eslintConfig配置、devDependencies中所有关于eslint的项

2.npm install

安装vuex

命令：npm install vuex --save

 // 创建store.js文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
	state:{
		// 登录用户信息
		userInfo: {},
	},
	mutations: {
		// 登录用户信息
		SET_USER (state, obj) {
			state.userInfo = obj;
		},
	},
	getters: {
		userInfo: state => state.userInfo,
		token: state => state.userInfo.token,
	}
})
export default store


// main.js引用
import store from './store'
new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app') 

安装vue-router

命令：npm install vue-router

// 创建router.js文件
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const r = new Router({
	mode: 'history',
	routes: [
		{
			path: '/login',
			name: 'login',
			meta: {
				title: '登录'
			},
			component: () => import('@/views/login/index')
		},
	]
})
export default r


// main.js引用
import router from './router'
new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')