vue2专注app软件定制开发项目的创建

1.全局安装

npm install -g @vue/cli
1

2.专注app软件定制开发然后搭建项目

vue create 项目名称
1

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

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

npm run serve
1

vue组件的创建使用

首先我们需要将禁用了

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

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

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

上面就是禁用eslint的方式

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

执行如下指令

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

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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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

import Vue from 'vue'import App from './App.vue'import router from "./router/index.js"Vue.config.productionTip = falsenew Vue({  router,  render: h => h(App),}).$mount('#app')
1
2
3
4
5
6
7
8
9
10
11

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

<template>  <div id="app">    <router-view></router-view>  </div></template><script>export default {  name: 'App',  }</script><style></style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

安装我们的组件的依赖

npm i vant@latest-v2
1

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

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

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