Vue 2.7 + Vite项目搭建

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 2.7 + Vite项目搭建相关的知识,希望对你有一定的参考价值。

参考技术A 需要在根目录创建 vetur.config.js

或者改用 volar 插件

使用官方的 @vitejs/plugin-vue2 插件

vite创建vue项目后, 把插件替换下就行了

vue2应该只支持vue-router3版本

使用 unplugin-vue-components 插件

使用方法(element-ui为例):

使用 @vitejs/plugin-legacy 插件

vue项目搭建

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管理路由数据的

以上是关于Vue 2.7 + Vite项目搭建的主要内容,如果未能解决你的问题,请参考以下文章

【Vue3+Vite+TS】1.0 项目搭建

Vite + Vue3 项目搭建笔记

搭建vue3 + ts + vite项目的最佳方案是啥

vite2.0搭建vue3移动端项目实战

vue3+vite+ts 搭建项目

vue3+vite+vant搭建项目