vue项目搭建

Posted 2020-11-23 zx125

vue项目搭建

环境搭建

安装node环境
官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/
安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装脚?架
cnpm install -g @vue/cli
清空缓存处理
npm cache clean --force

项目命令

创建项目

vue create 项目名
// 要提前进入目标目录(项目应该创建在哪个目录下)
// 选择自定义方式创建项目，选取Router, Vuex插件

启动/停止项目

npm run serve / ctrl+c
// 要提前进入项目根目录

打包项目

npm run build
// 要在项目根目录下进行打包操作

小知识点

箭头函数

let zx=()=>{
    return 6
}

let zx=()=>5

let zx=n=>n*10

let zx=(a,b)=>a*b

函数原型

在类的prototype中的属性在，所有实例中都可以使用

function Fn() {}

let f1 = new Fn();
let f2 = new Fn();
Fn.prototype.num = 888;

console.log(f1.num);
console.log(f2.num);

let f3 = new Fn();
console.log(f3.num);

项目框架介绍

项目目录

dist: 打包的项目目录(打包后会生成)
node_modules: 项目依赖
public: 共用资源
src: 项目目标,书写代码的地方
     -- assets:静态资源
     -- components:组件
     -- router:路由文件
     -- store:状态库文件
     -- views:视图组件
     -- App.vue:根组件
     -- main.js: 入口js
package.json: 项目配置文件

main.js

1.加载vue,router,store等配置，和自定义的js，css等

2.加载根组件，绑定挂载点（在App.vue中需要有挂载点）

3.浏览器发起请求，router组件会更具url匹配组件，替换App.vue中的占位符<router-view/>

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')

router

路由

@表示/src表示src的绝对路径

也可以使用../这种相对路径

import User from '@/views/User.vue'

import Vue from 'vue'
import VueRouter from 'vue-router'

#导入相关的组件
import Home from '../views/Home.vue'

Vue.use(VueRouter)

#配置路由组件映射关系
const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  }
]

const router = new VueRouter({
  #开启浏览历史
  mode: 'history',
  #配置目录
  base: process.env.BASE_URL,
  routes
})

#导出js，可以被main.js引用
export default router

界面组件

1.有且只有一个根标签

2.style中的scoped默认为True，表示样式只会影响当前组件，不会影响其他组件，data是return方式的

3.js要注意一定要导出export default

<template>
    <div>
        <h1>用户界面</h1>
    </div>
</template>

<script>
    export default {
        name: "User",
        comments: {
            
        },
        data() {
            return {
                
            }
        }
    }
</script>

<style scoped>

</style>

组件实现跳转

vue跳转不能使用a标签，因为a标签跳转会刷新界面，而vue的核心是跟换组件或者数据

<router-link to="/">主页</router-link>

注意

点击的时候会加上这个类，可以给这个类加上样式来识别点击的按钮

/*router-link渲染的a激活时的状态*/
a.router-link-exact-active {
color: pink;
}

方法跳转

$router就是根组件的vue对象的属性

        methods:{
            goDetail(){
                this.$router.push('/book/detail');
                this.$router.push({
                    'name': 'book-detail'
                })
            }
        }

前进后退

go的参数的正负表示历史记录的前进和后退

        methods:{
            go(){
                this.$router.go(-1);
            }
        }

路由重定向

当浏览器访问/index的时候，最后浏览器留下的url是/不是/index，但是抓包抓到的请求是/index

    {
        path: '/',
        name: 'home',
        component: Home
    },{
        path:'/index',
        redirect:'/'
    }

v-for---:key建立缓存

key属性是为标签建立缓存的标识，不能重复，在循环组件下，必须设置

<Books v-for="book in books" :book="book" :key="book.title"></Books>

静态资源

当组件自己使用静态资源可以使用相对路径取，但是不能使用绝对路径（使用绝对路径，浏览器会在路径前面拼接上url，请求资源的url会不对）

<img src="../assets/img/西游记.jpg"/>

跨组件资源路径传输require

路径要使用相对路径

{id:1, img:require('../assets/img/西游记.jpg'), 

组件的生命周期--钩子

一个组件，会在页面中渲染，也会销毁存放到内存(不渲染) => 加载组件到销毁组件

从加载一个组件到销毁该组件，整个生命周期中存在很多特殊的时间节点(组件要创建了，创建成功了，要加载了，加载成功了， 要更新数据了，数据更新完毕了，要销毁了，销毁成功了)，这些特殊的时间节点，vue都提供了对应的回调方法，来辅助完成在这些时间

        //还不能拿到数据
        beforeCreate() {
            window.console.log('该组件要被创建了');
        },
        
        // 最常用的钩子函数：组件加载后，可以请求后台数据，更新组件数        据；组件间路由传参的值获取
        created() {
            window.console.log('该组件已经创建了');
        },
        
        //当组件不在活动界面
        destroyed() {
            window.console.log('该组件已经销毁了')
        }

视图组件传参

#路由配置
path:'/book/detail/:pk',
name: 'book-detail',
component:BookDetail

#传递参数

#path
<router-link :to="'/book/detail/' + book.id"></router-link>

#name
<router-link :to="{name: 'book-detail', params{pk:book.id}}">}</router-link>

#methods
this.$router.push(`/book/detail/${id}`);

this.$router.push({
   name: 'book-detail',
   params: {pk: id},
});

#接收参数

let pk = this.$route.params.pk;

小知识点

$router管理路由跳转的
$route管理路由数据的