前言：如何搭建一个Vue项目
1、安装npm vue服务
1、安装vue-cli：
npm install -g @vue/cli
2、如果安装失败，检测网络，清理npm缓存:
npm chche clean --force
3、检查版本：
vue -V
4、进入到项目根目录：
cd C:\Install Path\Vue\Vue_Study_One
5、创建新项目：
vue create vue_project
1.选择 Manually select features (使用数字"1,2"的方式选择)
2.选择项目需要安装的属性(使用“空格键”选择)
Check the features needed for your project:
(*) Babel
(*) Router
(*) Vuex
(*) Linter / Formatter
3.Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) 输入"Y"
4.Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only 选择这个(默认第一个)
5.Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save 选择这个(默认第一个)
6. Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
> In package.json 选择这个(默认第二个)
7.Save this as a preset for future projects? (y/N) 输入"N"
8.接下来就进入创建项目的过程~~~
6、进入到新项目：
cd vue_project
7、执行编译：
npm run build
8、启动项目：
npm run serve
2、新项目创建成功后，使用pycharm打开，目录结构如下：
main.js 入口的JS文件
router.js 做路由配置的配置文件
store.js 状态管理器的配置文件
3、编辑配置文件vue.config.js，并打包
// 配置项目启动的端口号
module.exports = {
baseUrl: "./",
devServer: {
port: 8888,
}
}
3.1、打包命令 npm run build
3.2、打包后生成dist目录，里面的文件就是发布用到的文件。
3.3、打包完毕后，使用 npm run serve 重启项目，使用 http://localhost:8888/ 端口重新登录页面。
4、主要文件介绍
/public/index.html 这个文件是访问 http://localhost:8888/ 看到的页面
/src/views/main.js 这个文件是Vue视图的入口文件
/src/views/App.vue 这个文件是Vue的根组件
一、Vue框架内组件的使用
这里用"父组件内应用子组件"举例
1.1、在/src/components/目录下新建一个NavBar.vue文件 (1、创建子组件)
<template> <!-- 模板 -->
<!-- 1、创建一个组件 -->
<div id="nav-bar">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
</template>
<script>
// export default {}与script标签绑定出现
export default {
// 导出该组件的数据，方法，计算，监听，生命周期钩子等
name: "NavBar"
}
</script>
<style scoped>
/*保证样式只适用于组件内部，否则整个页面都会使用*/
</style>
1.2、在/src/App.vue文件内，引用子组件 (2、导入子组件 3、注册子组件 4、使用子组件)
<template>
<div id="app">
<!-- 4、使用子组件 -->
<NavBar></NavBar> <!-- 这个是应用的子组件 -->
<router-view/>
</div>
</template>
<!-- 父组件内引用子组件 -->
<script>
// 2、导入子组件
import NavBar from './components/NavBar.vue'
export default {
// 3、注册子组件
components: {
NavBar // 原格式为："Nav": Nav
}
}
</script>
二、路由控制器router
2.1、router.js文件内名称及用途介绍
path： 定义URL的访问路径
1.path: '/one-view' 一级路由：在跟组件中被渲染，替换跟组件的<router-view/>标签
2.path: '/one-view/one-detail', 二级路由:在根组件中被渲染，替换根组件的<router-view/>标签
name： 定义别名
1.name: 'one', 定义别名name的值为 "one"
component: () => import('./views/OneView.vue')： 指定URL访问路径对应的访问文件(这里写绝对路径)
redirect：路由重定向
1.redirect: '/home' 重定向到'/home'
children: [{}]： 子路由(使用方式如下：)
children: [{
path: "show",
component: () => import('./components/OneShow.vue'),
}]
2.2、在App.vue组件内，router的用法
1.click事件的应用
<template>
<div id="one-view">
<div class="one-detail" @click="detail">详情</div>
</div>
</template>
<script>
export default {
methods: {
// 完成router的逻辑转跳(触发@click="detail"时)，转到"/one-view/one-detail"这个页面
detail () {
this.$router.push("/one-view/one-detail"); // URL指向
}
}
}
</script>
2.<router-link></router-link> 的应用
<template>
<div id="nav-bar">
<!-- router-link在页面上会被渲染成a标签 -->
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>|
<router-link :to="{name: 'one'}">OneView</router-link>|
<!-- 这里还可以使用v-bind绑定属性"to"的方式,起一个别名(name: 'one'),那么就会去router.js文件中找(name: 'one')的值 -->
</div>
</template>
3.<router-view/>的应用 (子路由的应用)
1、在router.js文件中定义子路由
{
// 二级路由:在根组件中被渲染，替换根组件的<router-view/>标签
path: '/one-view/one-detail',
component: () => import('./views/OneDetail.vue'),
// 子路由(可以有多个子路由)：在所属路由指向的组件中被渲染，替换该组件的<router-view/>标签
children: [{
path: "show",
component: () => import('./components/OneShow.vue'),
}]
},
2、在子路由的上一级路由(二级路由)指向的文件OneDetail.vue中，定义如下：
<template>
<div id="one-detail">
<div @click="back">返回</div>
<div @click="show">显示</div>
<div class="box">
<!-- 会被替换为该路由下的子路由指向的组件 -->
<router-view/>
</div>
</div>
</template>
<script>
export default {
methods: {
back () {
// $router采用history方式返回上一级
this.$router.go(-1)
},
show () {
// $router的逻辑跳转路径
this.$router.push('/one-view/one-detail/show')
}
}
}
</script>
三、状态控制器store.js
3.1、修改与获取状态控制器store.js中的某个状态值(state内的状态值)
// 状态管理器
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
// 在任何一个组件中，均可以通过this.$store.state.msg访问msg的数据
// state永远只能拥有一种状态值
state: {
msg: "状态管理器" // msg用来存值
},
// 让state拥有多个状态值
mutations: {
// 在任何一个组件中，均可以通过this.$store.commit("事件名: setMsg","修改的内容")来修改state中的msg的值
setMsg(state, new_msg) { // mutations会对state进行一次封装，那么在setMsg里面就需要接受"state",new_msg表示接受传入的值
state.msg = new_msg
}
},
// 让mutations拥有多个状态值
actions: {
}
})
在router.js文件中定义路由
{
path: "/two-view",
component: () => import('./views/TwoView.vue'),
},
在TwoView.vue里面：定义 "获取和修改状态控制器的代码"
<template>
<div id="two-view">
<h1>two-view</h1>
{{msg}}
<div>
<button @click="getMsg">获取状态中的值</button>
</div>
<div>
<input type="text" v-model="info">
</div>
<div>
<button @click="setMsg">修改状态中的值</button>
</div>
<!--<router-link to="/two-view/two-detail">详情页面</router-link>-->
</div>
</template>
<script>
export default {
data() {
return {
msg: "two-view",
info: "",
}
},
methods: {
// 从状态管理器(store.js)中拿到msg的数据
getMsg() {
this.msg = this.$store.state.msg
},
setMsg() {
this.$store.commit("setMsg", this.info)
}
}
}
</script>
<style scoped>
</style>
四、vue选择器
<template>
<div id="two-detail">
<div @click="divClick" :class="{active: isAble}" ref="div_box">vue选择器</div>
</div>
</template>
<script>
export default {
data() {
return {
msg: "",
isAble: false,
}
},
methods: {
divClick() {
this.isAble = !this.isAble;
// 在vue逻辑中，通过$refs可以获取页面便签(vue的选择器)
let div = this.$refs.div_box;
div.style.height = "200px"
}
}
}
</script>
<style scoped>
.active {
background-color: orange;
}
</style>
六、Vue动画 -- transition标签结合v-show|v-if条件指令完成动画
1、在NavBar.vue文件中加入：<router-link to="/three-view">ThreeView</router-link>|
2、在router.js文件中加入路由：{path: "/three-view",component: () => import('./views/ThreeView.vue'),},
3、新建ThreeView.vue文件，编辑代码：
<template>
<div id="three-view">
<div class="box">
<ThreeBox v-for="(v,i) in box_list" :key="i" :val="v"></ThreeBox>
</div>
<div>
<button @click="isShow = !isShow">切换</button>
<!-- transition标签结合v-show|v-if条件指令完成动画 -->
<!-- 将要做动画的标签用transition标签嵌套 -->
<transition name="p_show">
<p v-show="isShow">P标签</p>
</transition>
</div>
</div>
</template>
<script>
import ThreeBox from '../components/ThreeBox.vue'
export default {
data () {
return {
isShow: false,
box_list: [
{
title: "苹果",
info:"美国公司",
},
{
title: "华为",
info:"中国公司",
},
{
title: "诺基亚",
info:"诺基亚",
},
{
title: "苹果",
info:"美国公司",
},
{
title: "华为",
info:"中国公司",
},
{
title: "诺基亚",
info:"诺基亚",
},
],
}
},
components: {
ThreeBox,
},
name: "ThreeView",
methods: {
}
}
</script>
<style scoped>
#three-view {
width: 100%;
height: 500px;
background-color: pink;
}
.box:after {
content: '';
display: block;
clear: both;
}
p {
background-color: orange;
}
/* 此动画针对于显隐切换 */
.p_show-enter-active,
.p_show-leave-active {
transition: all 1s ease;
}
.p_show-enter,
.p_show-leave-active {
opacity: 0;
}
</style>
4、在components目录下新建ThreeBox.vue文件，编辑代码：
<template>
<div id="three-box" :class="{move: isMove}" @mouseover="moving" @mouseout="moved">
<h3>{{val.title}}</h3>
<p>{{val.info}}</p>
</div>
</template>
<script>
export default {
props: ['val'],
data() {
return {
isMove: false
}
},
methods: {
moving () {
this.isMove = true;
},
moved () {
this.isMove = false;
},
}
}
</script>
<style scoped>
#three-box {
width: 120px;
height: 200px;
border: 3px solid red;
float: left;
transition: .3s;
}
.move {
transform: translateY(-10px);
}
</style>
Vue动画实现效果：
七、Vue插槽
1、编辑FourView.vue
<template>
<div id="four-view">
<FourBox>
<!-- 子组件只是需要渲染父组件的内容，可以通过插槽实现数据的传递 -->
<!-- 父组件写在子组件标签内部，用全局属性slot与子组件内部插槽name属性一一对应 -->
<div slot="st" @click="divClick">
<span>{{msg}}</span>
<span>{{msg}}</span>
</div>
</FourBox>
</div>
</template>
<script>
import FourBox from '../components/FourBox.vue'
export default {
data () {
return {
msg: "four 信息"
}
},
components: {
FourBox
},
methods: {
divClick() {
this.msg = "插槽信息"
}
},
}
</script>
<style scoped>
</style>
2、编辑FourBox.vue
<template>
<div id="four-box">
<slot name="st">插槽</slot>
</div>
</template>
<script>
export default {
name: "FourBox"
}
</script>
<style scoped>
</style>