https://cn.vuejs.org/index.html 需要你做一下预习：https://cn.vuejs.org/v2/guide/index.html 数据驱动。如果我们要改变页面效果，不再需要直接操作dom元素，只需要改变数据就好。数据改变之后框架会自动的帮我们进行页面更新。 js最初的出现就是为了解决一个页面中弹出一个提示，或者做一个简单的计算。当时的环境下，浏览器可用的内存很小，为了解决这些问题，js语言必须简单、没有太复杂的数据结构、占用内存小。 但是随着时间的发展，网页的功能越来越复杂，需要的交互越来越多，js需要做的事情就更多。随着时代的发展，浏览器的厂家也越来越多，每家浏览器对js语法的支持也不一样。ECMA这个组织，建立一个统一的标准，在不停的制定一些语言语法的规范。 语言在发展的过程中，会吸取或者借鉴一下同行的一些优势，来完善自身。 为了解决业务场景的复杂化，出现了很多框架或者开发模式： jQuery是前期出现的一个神级的插件，它提供了一个标准的元素选择方案，让我们可以快速的做元素选择。选中之后做后序的各种操作。它统一了各个浏览器中js语法的差异，使用jQuery写代码就不需要考虑各个版本浏览器中语法的差别 MVC框架Backbone，是早期经典的前端开发框架(jQuery+underscore.js+backbone.js+require.js)；做SPA单页面应用程序开发 angular.js，是google的。分为两类：angular.js和angular react.js，是facebook出的框架，目前是全球使用最广泛的。国内十家公司的react可能有十种写法 vue.js，是一个个人项目，目前是国内使用比较广泛的。国内十家公司的vue只能有一种写法 https://cli.vuejs.org/zh/ 刚才我初始化项目时选择的内容 翻译之后的中文版本 npm的配置文件，路径在windows的c:/users/你的用户名/.npmrc vue中的路由插件，路由的作用是实现页面跳转。简单点理解就是再浏览器中访问指定的地址的时候展示的组件或者页面内容 https://router.vuejs.org/zh/ 路由分两种模式：hash和history 区别：hash浏览器支持性好，不需要做额外的配置，可以直接使用；history模式再发布的时候需要做特殊的设置，在web服务器上做了配置之后才能使用；hash模式的路由，地址路径中有#进行分割，#后面的表示路径，history模式中没有# 参数传递之后，在对应的页面使用$route属性可以直接获取参数 https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E7%BB%84%E4%BB%B6%E5%86%85%E7%9A%84%E5%AE%88%E5%8D%AB,抽空了看看 beforeEach afterEach children 在一个组件中放多个router-view,通过name属性进行命名指定 在定义路由的时候使用components属性指定展示的组件，可以通过设置属性名为router-view的name属性，属性值为对应的组件的方式实现 https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E7%BB%84%E4%BB%B6%E5%86%85%E7%9A%84%E5%AE%88%E5%8D%AB https://cn.vuejs.org/v2/api/#%E5%85%A8%E5%B1%80-API https://vuex.vuejs.org/zh/ vuex是vue中的一个状态管理插件，通俗的讲就是一个全局的数据管理工具。作用是实现项目中数据的集中式管理。 vuex是遵循单向数据流机制的：就是数据是单向流动的，分为三部分(view,state,action) 在view视图中，通过dispatch派发一个action改变数据，数据改变之后view视图重新渲染 vuex中的数据流向：在组件中通过dispatch派发一个action，在action中获取数据，然后通过commit提交一个mutation改变数据，数据改变之后组件重新渲染 他们可以接收的参数为: 你有没有用过vuex？ 两种回答方式： vuex不是项目开发的时候必选的一个插件，但是在需要用的时候你要知道它的存在，它的作用就是显示数据在不同的组件之间进行共享的。 手机app 管理后台 https://lurongtao.gitee.io/felixbooks-interview2/ vue.config.js,所有的相关配置信息都在vue-cli的官网上:https://cli.vuejs.org/zh/config/#vue-config-js https://webpack.docschina.org/ webpack官网，作为了解 是一个基于vue语法的服务器端渲染(SSR)框架。使用vue语法编写多页面应用程序，就是每一次路由跳转打开的都是一个新的html文件。它解决了SPA单页面应用程序的一个通病（最怕刷新）。 https://www.nuxtjs.cn/ yarn是facebook出的一款包管理工具，和npm一样的功能 https://yarnpkg.com/ 安装使用 .nuxt打包文件、nuxt.config.js配置文件、package.json依赖配置文件、static静态文件放在服务器vue
历史
基础api
<!-- list表示需要循环的数据 item表示循环到的每一项,index表示索引；其中item和index是形参，叫什么都可以； 循环的时候建议为每一项设置一个唯一的key，他的作用是做节点替换时候性能优化使用 -->
<li v-for="(item, index) in list" :key="item.id">{{index}}-{{item}}</li>
</ul>
computed: {
val1() {
return 'xxx'
},
val2: {
set(v) {
},
get() {
return ......
}
}
}
...
template: ``//....
}
template: ''
})
<home>
<template #end>
<h2>你草率了，我才是最后一行</h2>
</template>
<h3>我是展示在slot中的内容</h3>
<h2>我也是</h2>
</home>
</div>
<script src="./libs/vue.js"></script>
<script>
// slot表示插槽，就是占位符，这个位置我们先占了，放什么以后再说
const home = {
template: `<div class="home">
<h1>我是首页</h1>
<slot></slot>
<p>我是一段文字介绍</p>
<p>这里应该是最后了</p>
<slot name="end"></slot>
</div>`,
};
new Vue({
el: '#app',
components: { home },
});
</script>
<div>
<h1>这是一个组件</h1>
</div>
</template>
<script>
export defaule {
....
}
</script>
<style scoped>
/* scoped表示只在当前组件内有效 */
</style>脚手架
npm install -g @vue/cli # 全局安装vue脚手架，希望你成功? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No? Please pick a preset: Manually select features(选择使用手动方式创建项目)
? Check the features needed for your project: Choose Vue version, Babel, CSS Pre-processors, Linter(我现择了四项：1. 手动选择vue的版本【必选】，2.安装babel【必选】，3.css预处理，后面可以选择使用sass或者less等预处理语言，4.选择了代码规范性检测，写代码不符合规范时报错)
? Choose a version of Vue.js that you want to start the project with 2.x(选择vue2)
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)（选择使用sass）
? Pick a linter / formatter config: Basic（选择lint规范性检测的基础配置）
? Pick additional lint features: Lint on save（在保存的时候检测代码）
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files（把每一个插件的配置文件单独放置）
? Save this as a preset for future projects? No（以后都不使用这种配置）registry=https://registry.npm.taobao.org/
init.author.email=你的邮箱
init.author.name=你的名字
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/路由
安装
npm i vue-router # 安装路由插件使用
import Vue from 'vue'
import VueRouter from 'vue-router'
// 可以直接再组件中使用router-view和router-link等路由内置组件和对象($route和$router)
Vue.use(VueRouter)
const router = new VueRouter({
routes: [] // 路由表，或者叫路由数据，就是我们网文指定地址时候展示的组件
})路由传参
路由拦截和路由守卫
路由嵌套
命名视图
new Router({
routes: [{
path: '/demo',
name: 'Demo',
components: {
default: ()=>import('.....'),
first: ()=>import('...')
}
}]
})路由守卫其他的
beforeRouteUpdate(to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},vue中的其他API
ui组件库
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/vuex
vuex中的核心模块
api
mapXxx('命名空间', [数组])
mapXxx('命名空间', {对象})
如果没有命名空间空间参数，表示获取根节点上的内容项目
面试题和其他内容
插件
vue配置优化
module.exports = {
publicPath: "./", // 表示打包之后资源文件的加载路径
// 再做性能优化的时候，需要做到
/**
* 1. 路由文件的懒加载,使用 ()=> import('xxx')的方式引入,可以把路由组件单独打包成js文件，在需要使用的时候再引入
* 2. 使用cdn的方式引入第三方资源库
*
* **/
// configureWebpack，对webpack工具做额外的设置
configureWebpack: {
externals: {
// 属性名是js源代码中引入的时候使用的包名，属性值是引入js文件后再浏览器中可以直接使用的名字
vue: "Vue",
vuex: "Vuex",
"vue-router": "VueRouter",
axios: "axios",
"element-ui": "ELEMENT",
},
},
// 脚手架内置了一个node的开发服务器，可以直接让我们通过网络路径访问代码
devServer: {
// port: 998, // 改变开发服务器的端口号
proxy: {
// 访问以/api开头的地址时做一个代理转发
// 代理只有再开发的时候有用，打包之后就没用了
"/api": {
target: "https://papi.jiemian.com/page/api", // 目标服务器
ws: true, // 开启ws
changeOrigin: true, // 改变origin
pathRewrite: { "^/api": "" }, // 路径重写，把/api替换成空白
},
},
},
};
nuxt
yarn
npm i yarn -g # 全局安装yarn
yarn add xx # 安装模块，相当于 npm i xx
yarn remove xx # 删除模块，相当于 npm uninstall xxnuxt上线