项目实践-Vue2

目录

(一) 创建项目#

(1) 创建vue2项目#

 (二)vue2不需要vite,但需要禁用Eslint

(三) 添加vant-ui 

vue2#

(四)vue2,3都可以通用less,scss 

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

---

一) 创建项目#

(1) 创建vue2项目#

01 安装vue-cli脚手架

npm install -g @vue/cli

02 查看vue脚手架版本

vue --version  // 出现版本号表示成功

03 创建一个新项目  

vue create hello-world  // 创建项目

运行项目

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

 

 (二)vue2不需要vite,但需要禁用Eslint

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

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

 

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

(三) 添加vant-ui 

vue2#

vant2地址: Vant 2 - Mobile UI Components built on Vue

1. 安装依赖

2. 使用

   import Vue from 'vue'
   import App from './App.vue' 
   import Vant from 'vant';
   import 'vant/lib/index.css';  
   Vue.use(Vant)
   
   Vue.config.productionTip = false 
   new Vue({ 
     render: h => h(App),
   }).$mount('#app')

(四)vue2,3都可以通用less,scss 

(五)devtool挂载浏览器 

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

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

1. npm i vue-router@3  安装路由插件
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 表示精确匹配, 只有路由完全一样才能被匹配

<ro