vue-cli 4.0
一、安装
npm i @vue/cli -g
如果安装失败,使用
npm cache clean
清除缓存,然后再重新安装。
安装按成后,,使用以下命令检查是否安装成功:
vue -V (注意 V 大写)
二、创建项目
vue create 项目名称
如果没有配置保存过,会有两个选项:
1.default(babel,eslint):默认设置(直接enter)非常适合快速创建一个新项目的原型,没有带任何辅助功能的 npm包
2.Manually select features:自定义配置(按方向键 ↓)是我们所需要的面向生产的项目,提供可选功能的 npm 包
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
( ) Babel //转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。
( ) TypeScript// TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了 JavaScript 的语法,需要被编译输出为 JavaScript在浏览器运行,目前较少人再用
( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
( ) Router // vue-router(vue路由)
( ) Vuex // vuex(vue的状态管理模式)
( ) CSS Pre-processors // CSS 预处理器(如:less、sass)
( ) Linter / Formatter // 代码风格检查和格式化(如:ESlint)
( ) Unit Testing // 单元测试(unit tests)
( ) E2E Testing // e2e(end to end) 测试
选完后enter,接下来提示你选择对应功能的具体工具包:
- 是否使用history router
- css预处理器
- ESLint
- 何时检测
- 单元测试
- 如何存放配置
- 是否保存本次配置
- 搭建完成
public/index.html中id="app"与App.vue中的id="app"为何不会冲突?
答:作为入口文件的src/main.js,创建了应用的vue根实例。
根实例的el选项或者实例方法$mount()的参数,提供了一个已经存在的DOM元素作为挂载Vue实例的挂载目标。此处挂载元素是index.html中的id为’#app’的div元素。
根实例的render选项,接收createElement方法作为第一个参数用来创建VNode。而createElement又接收APP组件作为参数。
render渲染函数生成的VNode将会替换掉挂载元素,即App.vue组件的模板内容将会替换掉index.html中的挂载元素’#app’。最终渲染出来的页面中的’#app’元素是App.vue组件中的。注:rende渲染函数是字符串模板template的代替方案。使用构建工具时,vue.js使用的是不包含编译器的运行时版,而template一定要通过编译器编译成渲染函数,所以就用render替代了template。
三、插件使用
1、axios
npm install axios --save-dev
//main.js 中引入 axios:
import axios from 'axios';
Vue.prototype.$http=axios;
//使用 axios:
this.$http.get("url").then((res)=>{});
this.$http.post("url").then((res)=>{});
四、打包
执行 npm run build (vue-cli-service build):
- 4kb 以下的静态资源被内联到 JavaScript 中
vuex
如果项目简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 进行传递。但是如果是大中型项目中,很多时候都需要在不相关的平行组件之间传递数据,并且很多数据需要多个组件循环使用。这时候再使用上面的方法会让项目代码变得冗长,并且不利于组件的复用,提高了耦合度。解决以上问题,使用vuex
// store目录下的index.js
import Vue from 'vue'
import Vuex from 'vuex'
// 告诉 vue “使用” vuex
Vue.use(Vuex)
// 创建一个对象来保存应用启动时的初始状态
// 需要维护的状态
const store = new Vuex.Store({
state: {
// 放置初始状态 app启动的时候的全局的初始值
proInfo: {"name":"数据","proName":"运维系统"}
}
})
// 整合初始状态和变更函数,我们就得到了我们所需的 store
// 至此,这个 store 就可以连接到我们的应用中
export default store
在项目中的main.js文件中注册
// 项目根目录下的main.js
import Vue from "vue";
import App from "./App";
import store from "@/store";
new Vue({
el: "#app",
store,
components: {
App
},
template: "<App/>"
})
组件中使用store中的数据:
export default {
...
computed: {
bankName() {
return this.$store.state.proInfo.proName;
}
},
...
}
在组件中修改store中的数据:
<template>
<div class="test">
<h1>{{name}}</h1>
<button type="button" name="修改数据" @click="change"></button>
</div>
</template>
<script>
export default {
...
computed: {
name() {
return this.$store.state.proInfo.proName;
}
},
methods: {
change: function() {
this.$store.commit('changeProName', "新的运维系统")
}
}
...
}
</script>
在store下的index.js添加mutations:
// store目录下的index.js
import Vue from 'vue'
import Vuex from 'vuex'
// 告诉 vue “使用” vuex
Vue.use(Vuex)
// 创建一个对象来保存应用启动时的初始状态
// 需要维护的状态
const store = new Vuex.Store({
state: {
// 放置初始状态 app启动的时候的全局的初始值
proInfo: {"name":"数据","proName":"运维系统"}
},
mutations: {
changeProName(state,msg) {
state.proInfo.proName= msg;
}
}
})
// 整合初始状态和变更函数,我们就得到了我们所需的 store
// 至此,这个 store 就可以连接到我们的应用中
export default store
至此。所有使用这个组件的地方的数据全都被vue更新。
vue-router
Vue.js 官方的路由管理器。
分为两种模式:
- hash:浏览器地址不完整,含有#
- history:浏览器地址完整,需要后台支持
一、hash模式
#后面 hash 值的变化,并不会导致浏览器向服务器发出请求,浏览器不发出请求,也就不会刷新页面。每次 hash 值的变化,会触发hashchange
这个事件,通过这个事件就可以知道 hash 值发生了哪些变化。这样可以监听hashchange
来实现更新页面部分内容的操作。
二、history模式