vue2项目创建

vue2项目的创建

1.全局安装脚手架

npm install -g @vue/cli

2.然后搭建项目

vue create 项目名称

将得到下面图，我们可以通过上下键选择第二个.

得到我们的vue2小项目。
然后用vs-code运行项目，运行代码

npm run serve

vue组件的创建使用

首先我们需要将eslint禁用了

禁用方式：
点击“文件”=>“首选项”=>“设置”=>在输入框中输入vetur=>将使用的eslint的复选框取消掉

并且在我们文件vue.config.js中输入如下代码

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave : false
})

上面就是禁用eslint的方式

2.添加让项目添加less支持

执行如下指令

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

3.搭建vue-router

（1）.一个简单路由配置

npm i vue-router 安装路由插件,建议使用安装（vue-router@3）
在src创建views文件夹, 创建各个模块的组件 在src内创建router文件夹,
新建index.js(代码如下) 在main.js里, 把router挂载到vue的实例
配置路由出口,

（2）.然后在src中创建router文件,在文件中创建index.js文件
在文件中输入如下代码

//这里是导入需要的模块
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;

（3.）.在文件mian.js引入我们所写的index.js文件

import Vue from 'vue'
import App from './App.vue'
import router from "./router/index.js"

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

(4).然后配置写出组件的出口

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>


export default {
  name: 'App',
  
}
</script>

<style>
</style>

使用vent-ui的组件（引用在index.js引用）

安装我们的组件的依赖

npm i vant@latest-v2

在vent-ui中的快速入手中拿到万能的模板组件引入，如下代码：

import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vent);

然后就可以了，然后复制我们的组件就可以了。