vue项目实战(移动端)

相关资料#

1. vue-cli脚手架: vue2脚手架
2. vue3脚手架: vite
3. vue官网: [介绍 — Vue.js
4. vscode插件
   • vetur 必备工具
   • vue-helper 一些辅助功能
   • Vue VSCode Snippets 片段

(一) 创建项目#

01 安装vue-cli脚手架#

npm install -g @vue/cli

02 查看vue脚手架版本#

出现版本号表示成功

vue --version

03 创建一个新项目#

创建项目

vue create hello-world  // 1.创建项目

运行项目

cd hello-world  // 2.进入项目文件夹
npm run serve		// 3.运行项目

(二) 禁用Eslint#

// 根目录新增vue.config.js
module.exports = {
    lintOnSave: false
}

如果vue组件提示红色错误,如下图 

 解决办法: 文件 -> 首选项 -> 设置 然后输入eslint -> 选择Vetur -> 把√取消即可 

(三) devtool#

vue开发调试工具

1. 下载 http://soft.huruqing.cn
2. 添加到chrome扩展程序里

(四) 添加less支持#

1. npm install less less-loader@6.0.0 --save-dev

2. 在vue文件这样写即可, scoped表示样式只在当前文件有效, 不会影响其他组件

   ps: less-loader要安装6.0版本, 不然有兼容问题

   <style lang="less" scoped> 
   .box {
     .text {
       color: red;
     }
   } 
   </style>
   

(五) vue路由配置(背诵)#

(1)一个简单路由配置#

1. npm i vue-router  安装路由插件
2. 在src创建views文件夹, 创建各个模块的组件
3. 在src内创建router文件夹, 新建index.js(代码如下)
4. 在main.js里, 把router挂载到vue的实例
5. 配置路由出口, 详见下方第(2)点router-view
6. 使用router-link进行跳转, 详见下方第(3)点路由跳转

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router); 
// 路由数组
const routes = [
    {
        path: '/product',
        component: ()=>import('@/views/product/index.vue')
    },
    {
        path: '/cart',
        component: ()=>import('@/views/cart/index.vue')
    },
]

const router = new  Router({
    routes
})
export default router;

// main.js 代码
import Vue from 'vue'
import App from './App.vue'
import router from './router/index'

Vue.config.productionTip = false

new Vue({
  // 把router挂载到vue实例
  router,
  render: h => h(App),
}).$mount('#app')

(2) router-view#

1. 路由出口
2. 路由匹配到的组件将渲染在这里
3. 在app.vue配置

<template>
  <div id="app"> 
    <!-- 路由出口 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
};
</script>

(3) 路由跳转#

// 方式一
<router-link to="/cart">cart</router-link>

// 方式二
this.$router.push('/cart');

(4) 子路由配置#

使用子路由进行模块路由配置，结构比较分明 比如我们的网站有商品模块,有列表页面和详情页面, 路由如下 /product   商品模块总路由 /prodcut/list   子路由 /product/detail   子路由

{
    path: '/product',
    component: () => import('@/views/product/index'),
    children: [
        {
            path: 'list',
            component: ()=>import('@/views/product/children/list')
        },
        {
            path: 'detail',
            component: ()=>import('@/views/product/children/detail')
        }
    ]
}

(5) active-class#

active-class是vue-router模块的router-link组件中的属性，用来做选中样式的切换；

1. 只要路由中包含to里面的路由, 就能匹配到, 就会高亮, 比如: /product, /product/list, /product/detail都会使下面的第二个router-link高亮
2. exact 表示精确匹配, 只有路由完全一样才能被匹配

<router-link to="/" active-class="on" exact>首页</router-link>
<router-link to="/product" active-class="on">product</router-link>
<router-link to="/cart" active-class="on">cart</router-link>
<router-link to="/my" active-class="on">my</router-link>
<router-link to="/order" active-class="on">order</router-link>

(6) history模式#

vue2配置方式

1. vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

2. 如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面

3. 使用history需要后端支持, vue-cli创建的devServer可以支持

   const router = new VueRouter({
     mode: 'history',  // 默认hash
     routes: [...]
   })
   

vue3配置方式

const router = createRouter({ 
 	history: createWebHistory(),  // history模式
 	//history: createWebHashHistory(), // hash模式
  	routes
});     

(7) redirect重定向#

当访问 '/', 我们使用redirect使它默认跳到 '/product'

{
    path: '/',
    redirect: '/product'
},

(8) 404配置#

假如用户访问了一个没有的路由, 我们让它跳转到404页面

  {
    path: '*',
    component:()=>import('@/components/NotFound')
  }

(六) 父子组件通信(背诵)#

知识点(背诵):

1. 父传子: 父组件通过(绑定)属性的方式传数据给子组件, 子组件使用props接收数据
2. 子传父: 父组件在子组件上绑定一个自定义事件, 子组件通过$emit触发该自定义事件, 同时可以传入数据

1.父传子#

• 父组件给子组件绑定属性, 属性的值是需要传递的信息
• 子组件通过props接收父组件的信息

 // 例子1: 使用普通属性
// demo.vue
<template>
  <div>
    <h3>父组件</h3>
    <hr />
    <Son msg="hello world" username="张三"/>
  </div>
</template>

<script>
import Son from "./Son";
export default {
  components: {
    Son,
  },
};
</script> 

// Son.vue
<template>
  <div>
    <h4>子组件</h4>
    <p>msg: {
  { msg }}</p>
    <p>username: {
  { username }}</p>
  </div>
</template>

<script>
export default {
  props: ["msg", "username"],
};
</script> 

// 例子2: 使用绑定属性(可传变量)
// demo.vue
<template>
  <div>
    <h3>父组件</h3>
    <hr />
    <Son :msg="msg" :username="username" />
  </div>
</template>

<script>
import Son from "./Son";
export default {
  components: {
    Son,
  },
  data() {
    return {
        msg: '哈哈哈',
        username: '李四'
    };
  },
};
</script> 

// Son.vue
<template>
  <div>
    <h4>子组件</h4>
    <p>msg: {
  { msg }}</p>
    <p>