day68

Vue项目环境搭建

python
node ~~ python:node是用c++编写用来运行js代码的
nmp（cnpm） ~~ pip：npm是一个终端应用商城，可以换国内源cnpm
vue ~~ django：vue是用来搭建vue前端项目的

1. 安装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项目创建·

1. 进入存放项目的目录

   切换盘符 D:

   cd 文件目录

2. 创建项目

   vue create 项目名

   利用键盘上下键，选中

   Manually select features  （手动选择功能）

   上下键分别选中Router（路由）、 Vuex（状态管理、数据、组件通信），分别空格键就能选中

   Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
   使用历史模式的路由器?(需要为生产环境中的索引备份进行适当的服务器设置)(Y/n)
   选Y，回车，

   选择In package.json ，

   选中
   Save this as a preset for future projects? (y/N)
   把它作为未来项目的预置?(y / N)
   选N，回车，然后就开始创建项目了

3. 项目初始化

   项目初始化default，选default下面的一行，就是Manually select features （手动选择功能）

   然后cd v_proj切换到项目目录中，启动项目npm run serve，启动需要等待一会...（命令框中启动项目）

pycharm中配置并启动vue项目

用pycharm打开创建好的vue项目

添加npm启动，选择工具栏中的

Edit Configurations...

点击+号，添加npm，写项目的名字，Scripts选择server，然后apply，OK就配置成功了。

添加配置npm启动。就可以启动项目了

vue项目目录结构分析

├── v-proj                          项目名
|   ├── node_modules                当前项目所有依赖，一般不可以移植到其他电脑环境中
|   ├── public                      
|   |   ├── favicon.ico             标签图标
|   |   └── index.html              当前项目唯一的页面
|   ├── src                         项目核心的代码文件夹
|   |   ├── assets                  静态资源img、css、js
|   |   ├── components              小组件，公共组件
|   |   ├── views                   以页面为单位的vue组件
|   |   ├── App.vue                 根组件
|   |   ├── main.js                 全局脚本文件（项目的入口）
|   |   ├── router                  vue的路由管理
|   |   |   └── index.js            路由脚本文件（配置路由 url链接 与 页面组件的映射关系）
|   |   └── store        
|   |   |   └── index.js            仓库脚本文件（vuex插件的配置文件，数据仓库）
|   ├── README.md                   说明书
└   └── package.json                等配置文件
|_ tests                                 单元测试

vue组件（.vue文件）

1. template：有且只有一个根标签

2. script：必须将组件对象导出 export default {}

3. style：style标签明确scoped属性，代表该样式只在组件内部起作用（样式的组件化）

全局脚本文件main.js（项目入口）

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
    router,
    store,
    render: h => h(App)              箭头函数
}).$mount('#app')

改写

import Vue from 'vue'                    加载vue环境
import App from './App.vue'             加载根组件
import router from './router'           加载路由组件
import store from './store'             加载数据仓库

Vue.config.productionTip = false

new Vue({
    el: '#app',
    router,
    store,
    render: function (readFn) {
        return readFn(App);
    },
});

项目的生命周期

1. 启动项目，加载主脚本文件 main.js

   加载Vue环境，创建根组件完成渲染

   加载系统已有的第三方环境：router、store

   加载自定义的第三方环境与自己配置的环境：后期项目不断添加

2. router被加载，就会解析router文件夹下的index.js脚本文件，完成 路由—组件 的映射关系

3. 新建视图组件.vue（在views文件夹中），在路由配置（在router的index.js中），设置路由跳转（在导航栏组件中Nav.vue）

路由逻辑跳转点

路由重定向

Vue.use(VueRouter);

const routes = [
    {
        path: '/',
        name: 'home',
        component: Home
    },
    {
        path: '/home',
        redirect: '/',  // 路由的重定向
    },
    {
        path: '/course',
        name: 'course',
        component: Course
    },
    {
        // 第一种路由传参
        // path: '/course/detail',

        // 第二种路由传参
        path: '/course/:pk/detail',
        name: 'course-detail',
        component: CourseDetail
    }
];

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

export default router

知点总结

1. 创建项目：vue create 项目名 - babel、vue-router 、vuex

2. 项目目录

   node_modules依赖（不同电脑依赖需要重构，在命令框中输入cnpm install）
   views:页面组件
   components：小组件
   router/index.js：路由配置文件——路径与页面组件对应关系
   App.vue：根组件
   main.js：项目总脚本文件——配置所有环境，加载根组件

3. vue请求生命周期

   浏览器请求/user=>router插件映射User.vue组件=>User.vue组件替换App.vue中的 占位符

   注意：

   1）可以用 用户页 完成标签跳转

   2）this.$router.push('/user')完成逻辑跳转

4. vue组件生命周期

   生命周期钩子

   1）一个组件从创建到销毁的众多时间节点回调的方法

   2）这些方法都是vue组件实例的成员

   3）生命周期钩子的作用就是满足在不同时间节点需要完成的事

   created（）{} | mounted（）{}

   ======vue文件样式组件讲解======
   
   
   
   
   
   
   
   
   
   ======================================================================================
   export default {
           name: "Course",
           data() {
               return {
                   courses: [],
               }
           },
           components: {
               Nav,
               CourseTag,
           },
           beforeCreate() {
               console.log('Course组件要创建了')
           },
           created() {
               console.log('Course组件创建成功了');
               // 前后台开发时，是从后台请求数据
               this.courses = [
                   {
                       id: 1,
                       title: '西游记',
                       // img: 'http://...',  // 实际是后台图片链接
                       img: require('@/assets/img/001.jpg'),  // 前台逻辑中加载静态资源采用require
                   },
                   {
                       id: 3,
                       title: '西厢记',
                       // img: 'http://...',  // 实际是后台图片链接
                       img: require('@/assets/img/002.jpg'),  // 前台逻辑中加载静态资源采用require
                   },
               ]
           },
           destroyed() {
               console.log('Course组件销毁成功了')
           }
       }

5. 路由跳转

   this.$router.push({name:'路由名'，query：{拼接的参数}})
   this.$router.go(number)

6. 路由配置

   第一种：
   {
       path:'/course/detail',
       name:'course-detail',
   }
   {
       path:'/detail',
       redirect:'/course/detail/'
   }
   this.$router.push('/course/detail'); == this.$router.push('/detail')
   this.$router.push('/course/detail?pk=1');  =>this.$route.query.pk
   
   第二种：
   {
       path:'/course/detail/:pk',
       name:'course-detail',
       component:CourseDetail
   }
   this.$router.push('/course/detail/1'); =>this.$route.query.pk

7. js类的原型：类属性

8. 配置全局css样式

   import 别名 from ’资源‘

   @就代表src文件夹的绝对路径，官方提倡require加载静态文件

   import'@/assets/css/global.css'
   require(@/assets/css/global.css);

9. 路由知识点概况

   1)路由配置：router/index.js

   2)路由跳转与路由渲染：

   router-link、router- view、$router.push、$router.go
   console.log('跳转主页')；
   console.log(this.$router)；   控制路由跳转
   console.log(this.$route))；  控制路由数据
   
   this.$router.push('/')      往下再跳转一页
   this.$router.go(2)          go是历史记录前进后退，正为前进，负为后退，数字为步数

   3）路由传参：两种传参

    第一种：
    {{ course.title }}
   
           {{ course.title }}
           
   
     第二种：
    {{ course.title }}

10. js原型补充