目录
一) 创建项目#
(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
-
安装依赖
-
使用
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)一个简单路由配置#
npm i vue-router@3
安装路由插件- 在src创建views文件夹, 创建各个模块的组件
- 在src内创建router文件夹, 新建index.js(代码如下)
- 在main.js里, 把router挂载到vue的实例
- 配置路由出口, 详见下方第(2)点router-view
- 使用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#
- 路由出口
- 路由匹配到的组件将渲染在这里
- 在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组件中的属性,用来做选中样式的切换;
- 只要路由中包含to里面的路由, 就能匹配到, 就会高亮, 比如: /product, /product/list, /product/detail都会使下面的第二个router-link高亮
- exact 表示精确匹配, 只有路由完全一样才能被匹配
<ro