Detailed project vue

Creating Vue project

Vue project environment to build #

Copy1) 安装node
官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/

2) 换源安装cnpm
>: npm install -g cnpm --registry=https://registry.npm.taobao.org

3) 安装vue项目脚手架
>: cnpm install -g @vue/cli

注：2或3终端安装失败时，可以清空 npm缓存 再重复执行失败的步骤
npm cache clean --force

Vue project creation #

Copy1) 进入存放项目的目录
>: cd ***

2) 创建项目
>: vue create 项目名

3) 项目初始化

pycharm configure and start the project vue #

Copy1) 用pycharm打开vue项目
2) 添加配置npm启动

vue project directory structure analysis #

Copy├── v-proj
|   ├── node_modules    // 当前项目所有依赖，一般不可以移植给其他电脑环境(需要重新构建依赖)
|   ├── public          
|   |   ├── favicon.ico // 标签图标
|   |   └── index.html  // 当前项目唯一的页面
|   ├── src
|   |   ├── assets      // 静态资源img、css、js
|   |   ├── components  // 小组件
|   |   ├── views       // 页面组件
|   |   ├── App.vue     // 根组件
|   |   ├── main.js     // 全局脚本文件（项目的入口）
|   |   ├── router
|   |   |   └── index.js// 路由脚本文件（配置路由 url链接 与 页面组件的映射关系）
|   |   └── store   
|   |   |   └── index.js// 仓库脚本文件（vuex插件的配置文件，数据仓库）
|   ├── README.md
└   └── package.json等配置文件


移植项目到其他设备:
    1. 一般只需要移植三个文件: public, src和package.json
    2. 在新设备重新构建项目依赖(node_modules)
        1.先cd到需要构建的项目文件夹下
        2.cnpm install

Project Life Cycle

1. Browser request "/ user"
2. Mapping by the router assembly User.vue following index.js
3. User.vue App.vue component replacement root component in <router-view/>the placeholder

note:

Copy1. 使用<roouter-link to=""></roouter-link>进行页面跳转, a标签会刷新页面
2. 视图组件在App.vue根组件中的统一占位符为<router-view/>
3. App.vue根组一般为下面五行
    <template>
        <div id="app">
            // 页面组件占位符
            <router-view/>
        </div>
    </template>

Add components - Route mapping relationship

1. First page components in the views folder file a User.vue page components
2. User.vue introduced router under the folder in the file index.js
3. Configuring the mapping and routing of User.vue

Copyimport Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import User from '../views/User'  // 1.导入组件

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'home',
        component: Home
    },
    {
        path: '/about',
        name: 'about',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    },
   // 2.添加路由-组件映射关系
    {
        path: '/user',
        name: 'user',
        component: User
    },
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router

File-based component architecture

Copy<!--组件的template-->
<template>
    
</template>


<!--组件的逻辑语法, 固定要export default-->
<script>
    export default {
        name: "Nav"
    }
</script>


<!--组件的样式, scoped标识该样式使局部的, 只在该组件内生效-->
<style scoped>

</style>

Configuring Global css styles

1. The following assets in the src folder under the new css folder
2. New global.css global style css file in the folder
3. Import the file in the main.js

Copy/*自定义全局样式*/
html, body, h1, h2, ul {
    margin: 0;
}

ul {
    list-style: none;
}
Copy<!--在main.js中require导入, @表示src文件夹-->
import '@/assets/css/global.css'
require('@/assets/css/global.css')

Use sub-assemblies

• First introduced within parent components
• Registered in the parent assembly
• In the parent template assembly

Copy<template>
    <div class="course">
        <!--3.再使用-->
        <Nav></Nav>
        <div>课程</div>
    </div>
</template>

<script>
    // 1.先导入
    import Nav from '../components/Nav'
    export default {
        name: "Course",
        // 2.注册
        components: {
            Nav
        }
    }
</script>

Lifecycle hook assembly

• That is, a component is created from the previous method to the node between the time after being triggered by the destruction of
• These hooks are following vue object members (methods)

Copy<script>
    import Nav from '../components/Nav'

    export default {
        data() {
            return {
                back_data: ''
            }
        },
        components: {
            Nav
        },
        beforeCreate() {
            console.log('home组件创建之前')
        },
        created() {
            console.log('home组件被创建之后')
        },
        beforeMount() {
            console.log('home组件加载之前')
        },
        mounted() {
            console.log('home组件被加载之后')
        },
        destroyed() {
            console.log('home组件被销毁后')
        }
    }
</script>

Jump routing logic

• this.$router

  Jump routing control

  • this.$router.push('/') Go to the home page
  • this.$router.go(-2) Browser two steps back

• this.$route Control routing data

Copy<script>
    export default {
        name: "Nav",
        methods: {
            goHome(){
                // this.$route.path当前路径
                if (this.$route.path !== '/') {
                    // 跳转到主页
                    this.router.push({name: 'home'})
                }
            }
        }
    }
</script>

Routing configuration parameter passing

Question mark carry parameters: ?id=1#

• Carry parameters after the question mark will be placed this.$route.queryin

Copy   // 第一路由传参种路由配置
    {
        path: '/course/detail',
        name: 'course-detail',
        component: Detail,
    },


// ?id=1  -->  query:{id:1}
goDetail(id) {
                this.$router.push(`course/detail?id=${id}`);
      
                this.$router.push({
                    name: 'course-detail',
                    query: {id:id}
                })
            }

• The use of <router-link>labels can be achieved so that the query object $ route carries parameter jumps

Copy<router-link :to="{ name: 'course-detail',query: {id:course.id}}">
            {{ course.title}}</router-link>

 <router-link :to="`course/detail?id=${course.id}`">{{ course.title}}</router-link>

Famous route packets carry parameters: /course/1/detail#

• Famous packet carries the participants will be placed $this.paramsin

Copy// 第二种路由传参路由配置
    {
        path: '/course/:id/detail',
        name: 'course-detail',
        component: Detail,
    },
        
        
// course/1/detail  -->  params:{id:1}
goDetail(id) {
                this.$router.push(`course/${id}/detail`);
      
                this.$router.push({
                    name: 'course-detail',
                    params: {id:id}
                })
            }
        
Copy<router-link :to="{ name: 'course-detail',params: {id:course.id}}">
            {{ course.title}}</router-link>

 <router-link :to="`course/${course.id}/detail`">{{ course.title}}</router-link>