Vue2脚手架搭建项目流程(脚手架、sass、router、vant、axiso、vuex)

如何搭建Vue2项目(脚手架、sass、router、vant、axiso、vuex)

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：如何搭建一个项目？

---

前言

一.搭建脚手架

首先，vscode中将终端切换到cmd

1.安装只用装一次

npm install -g @vue/cli

2.安装好后

vue -V 脚手架版本

显示版本号，就说明装好了

3.创建项目：使用脚手架搭建项目（文件夹）

vue create 项目目录
例如：vue create project

4.启动项目

cd 项目名称 (切换到项目路径下)
npm run serve（ 启动）

5.根据提示访问网址

进去之后显示此页面说明已经成功了

6.脚手架文件目录解析

1. public文件夹：index.html:唯一的HTML文件。
2. src文件夹：源代码的文件夹，程序员就在此目录下写代码
3. src/assets文件夹: 存放静态资源（css，图片，字体文件，视频，音频等等），这些静态资源会做（webpack）打包处理（编译）
4. src/components文件夹: 所有的组件
5. src/App.vue：main.js所引入的App.vue是模板（main.js里的Vue对象的模板）
   其他的组件都把app当做父组件
6. src/main.js: 就是唯一的html文件所对应的唯一的Vue对象（根实例）。入口文件。
   
   7.关闭Eslint:

    在Vue.config.js文件添加->
    module.exports = defineConfig({
        transpileDependencies: true,
        lintOnSave:false  //添加该行代码
    })
    然后重新启动项目

---

二. vant组件的安装和使用

1.安装

Vue 3 项目，安装最新版 Vant：
npm i vant -S
    
Vue 2 项目，安装 Vant 2：
npm i vant@latest-v2 -S

我们用的是vue2，所以这里装vue2的

2.引入以及使用

全局引入，在main.js中配置

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

局部引入:在当前组件引入

import 'vant/lib/index.css';
import { Button } from 'vant';
import Vue from 'vue';
Vue.use(Button);

这边就出来了

三.json-server

1：全局安装

npm install -g json-server

2:查看是否安装成功

json-server -v

3:vue =>src=>创建mock文件夹=>建立自己的data.json=>在json 文件中创建数据=>

4:启动：json-server --watch data.json  
       data.json指的是自己建立的data.json

四.axios

1.下载

npm install --save axios

2.在vue项目的main.js文件中引入axios

import axios from 'axios'
Vue.prototype.$http = axios.create();

3.在src–>创建utils–>service.js文件

import axios from "axios";

let service = axios.create({
    baseURL:"",//相同绝对路径
    timeout: 100000,//超过这么多时间，则请求终止
    headers: {//请求头携带数据的格式
        "Content-Type": "application/json;charset=UTF-8",
        // "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",        
    }
});
// 添加请求拦截器（Interceptors）
service.interceptors.request.use(function (config) {
    // 发送请求之前做写什么
    let token =  localStorage.getItem("token");
    // 如果有
    if(token){
      // 放在请求头（token跟后端沟通，他需要什么该成什么就可以了）
        config.headers.authorization = token;
    }
    return config;
  }, function (error) {
    // 请求错误的时候做些什么
    return Promise.reject(error);
  });
// 添加响应拦截器
service.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});

export default service;

4.使用

在需要发请求的组件中引入

import service from '@/utils/service';
service({
                 配置项信息:
                 url:请求的地址
                 method:请求的方式
                 params: { get传参用的配置项
                    key1:value1,
                    key2:value2
                 },
                 data: {除了get传参用的配置项
                    key1:value1,
                    key2:value2
                 },
             });  

举例：

这边数据就已经拿到了

五.路由

1.安装

npm i vue-router@3 -S （--save的缩写）

2.配置路由

在src下创建一个router文件夹,创建index.js

    import Vue from 'vue';//引入Vue对象，因为要用它的use
    import Router from 'vue-router'//引入vue-router
    //引入你需要配置的组件
    import MyHello from './components/MyHello.vue'
    //使用路由插件
    Vue.use(Router);
    
    //配置路由
    const router =  new Router({
        routes: [
            {
                path:"/hello",
                component:MyHello
            },
            //路由懒加载(按需加载)
            {
                path: '/about',
                name: 'about',
                component: () => import('./components/MyWorld.vue')
            }
        ]
    });
    
    //导出
    export default router;

3.main.js 配置

//引入自己定义的路由js文件
    import router from './router'
    new Vue({
      render: h => h(App),
      router //添加路由对象
 }).$mount('#app')

4.路由的嵌套

    2.除了一级路由加/，二级路由全都不加/
    routes:[
            {
                path:"/hello",
                component:MyHello,
                children:[
                    {
                        path:"happy",
                        component:MyHappy,
                    }
                ]
            }
        ]

    跳转:要写完整路径
    <router-link to='/hello/happy'>八卦</router-link><br>

5.重（重新）定（定位）向（方向）

//route
    {
        path:'/',
       	redirect:'/homequery'
    }

6.捕获所有路由或 404 Not found 路由

      // 404页面必须在所有规则的最下面
      {
        path: '*',
        name: 'no',
        component: No
      }

    let router = new VueRouter({ //插件路由对象
       routes,
       // mode:'hash'//哈希模式   location.href
       mode:'history'//历史记录   history.pushState
    });

六.sass

1.安装

cnpm install node-sass --save-dev //安装node-sass 
cnpm install sass-loader@6.0.6 --save-dev //安装sass-loader 
cnpm install style-loader --save-dev //安装style-loader 或者 vue-style-loader ！

2.在需要用到sass的地方添加lang=scss

<style lang="scss" scoped> 
1.基本用法
1）变量
sass的变量名必须是一个$符号开头，后面紧跟变量名

//注意加单位
$myHeight:200px;
$myColor:yellow;
$myFontSize:22px;
#box1 {
    background:$myColor;
    height: $myHeight;
    font-size: $myFontSize;
    width: 100px;
}

特殊变量：如果变量嵌套在字符串中，则需要写在 #{} 符号里面，如：
$myStringSize:size;
#box2 {     
    background:blue;
    height: $myHeight;
    font-#{$myStringSize}: $myFontSize;
    width: 200px;
}

默认变量：仅需在值后面加入 !default即可， 默认变量一般用来设置默认值，当该变量出现另外一个值时，无论定义先后，都会使用另外一个值，覆盖默认值

$color: skyblue;
$color: blue !default;
#box3 {
    background:$color;
    height: $myHeight;
    font-size: $myFontSize;
    width: 100px;
}

2）计算功能
sass允许使用算式。
#box4 {
    background:$color;
    height: $myHeight;
    font-size: $myFontSize;
    width: 2 * 30px;
}

3）嵌套
标签嵌套
sass文件
#box5 {    
    width: 100px;
    height: 100px;
    background: yellow;
    color: #333;
    a {
       font-size:14px;
       &:hover {
          text-decoration:underline;
       }
    }
}    
2.高级用法
1）函数 function
sass允许用户编写自己的函数，以@function开始

@charset "utf-8";

$fontSize: 10px;
@function pxTorem($px) {
    @return $px * $fontSize;
}

#box6{
    width: pxTorem(10);
    height: pxTorem(20);
    background: green;
}

// css编译后样式
#box6 { width: 100px; height: 200px; background: green; }

2）if条件语句
  @if语句可以用来判断

// sass样式
    
    $type: monster;
    #box7 {
        width: 100px;
        height: 100px;
        @if $type == ocean {
            background: blue;
        } @else if $type == matador {
            background: red;
        } @else if $type == monster {
            background: green;
        } @else {
            background: black;
        }
    }
// css编译后样式
#box7 { width: 100px; height: 100px; background: green; }


/*# sourceMappingURL=test5.css.map */


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link href="mycss/test5.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="box7">
            123
        </div>
    </body>
</html>


3）循环语句             
for循环有两种形式，分别为：
 $var 表示变量，start表示开始值，end表示结束值，两种形式的区别在于 through 包括 end 的值，to 不包括 end 值。

// sass样式
@for $i from 1 to 4 {
    .item-#{$i} {width: 2em * $i;}
}
// css编译后样式
.item-1 {
    width: 2em;
}
.item-2 {
    width: 4em;
}
.item-3 {
    width: 6em;
}

while循环
// sass样式
$i: 2;
@while $i > 0 {
    .item-#{$i} {width: 2em * $i;}
    $i: $i - 1;
}
// css编译后样式
.item-2 {
  width: 4em;
}
.item-1 {
  width: 2em;
}

4）混合(mixin)
sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开

sass文件:
@charset "utf-8";

@mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  filter: alpha(opacity=$opacity);
}

//使用include调用opacity
#opacity{
  @include opacity;      //参数使用默认值  50/100 = 0.5
}

#opacity-80{
  @include opacity(80); //传递参数  80/100 = 0.8
}
</style>

七.vuex（状态管理模式+库）

1.安装

npm安装vueX：  npm install vuex@3 --save

2.创建 vueX.store 对象(src–>store–>index.js)

    ./src/store/index.js
    import Vue  from 'vue'
    //引入vueX
    import Vuex from 'vuex'
    //把vueX安装到Vue里
    Vue.use(Vuex)
    
    export default new Vuex.Store({
        state:{
              id: '01'
        },
        getters:{},
        mutations:{},
        actions:{}
    })

3.把vueX.store对象植入到vue的根属性(main.js中配置)

    ./src/main.js
    //导入
    import store from './store'
    new Vue({
      	el: '#app',
      	store,//把store对象植入到vue的根属性，在vue组件里就可以使用 this.$store拿到vueX.store对象
        router
      		……………………	
    })

4.组件里获取数据：

    //模板里：
    $store.state.id
    //脚本里
    this.$store.state.id

5.组件里保存数据

this.$store.state.id = '02' 
//这个方式虽然可以，但是不推荐，因为，它不能跟踪状态。
//推荐，强烈推荐（必须）使用mutation来修改数据。

6.基本使用

    // 提交mutations（其实就是调用mutations里的函数）
    	this.$store.commit("mAddAge");
    // 派发actions(其实就是调用actions的里的函数)
        this.$store.dispatch("aAddAge");
    
    // mutations里修改state的数据
    // 如果想修改state的数据，必须使用mutations。
    
    mutations里的函数：
    // 1.第一个参数：state，不用程序员传值，直接使用。
    // payload:载荷。就是传来的数据。
    // 2.提交mutation时，参数使用对象的写法
     context.commit({
                      type:"回调函数",
                      inc: 参数
                  });
    actions里的函数：
    // 1.第一个参数：context（当前仓库对象，也叫上下文对象），不用程序员传入，直接使用
    // 2.派发action时，参数使用对象的写法
     this.$store.dispatch({
              type:"aAddAge"
      })

7.modules：模块化

1> 创建： ./store/modeles/模块(js文件)

    ./store/modeles/模块(js文件)

    此模块是xxx对应的数据及其操作
    export default {
       //namespaced:命名空间：其实就是想通过模块名的方式区分mutation和action
        namespaced:true,
        state: {
            模块名: [
                {
                    id:"01001",
                    name:"如何"
                },
                {
                    id:"01002",
                    name:"如何学好编程"
                }
            ]
        },
        mutations: {
        },
        actions: {
           
        }
    }

2> ./store/index.js

./store/index.js
    //引入模块
    import 模块名 from "./modules/person";
    import 模块名 from "./modules/books";
    
    export default new vueX.Store({
        // 把两个模块导入仓库里
        modules:{
            // 模块名:模块的值
            person:person,
        },
        state:{
        },
        mutations:{
        }
    });