vue项目从0到1

最新推荐文章于 2024-01-04 11:40:31 发布

weixin_49697953

最新推荐文章于 2024-01-04 11:40:31 发布

阅读量113

点赞数

分类专栏： vue JavaScript 前端文章标签： vue

本文链接：https://blog.csdn.net/weixin_49697953/article/details/110739846

版权

本文详述了从零开始构建Vue项目的步骤，包括项目准备、代码格式校验、路由配置、模块化路由、状态管理Vuex的使用、axios的二次封装、环境变量与反向代理设置以及移动端自适应配置。通过这些配置，实现了一个完整且适应不同设备的Vue项目。

摘要由CSDN通过智能技术生成

Vue项目

1 项目准备

npm install -g @vue/cli		// 安装 vue 脚手架

vue create my-vue			// 创建 vue 项目，可选配置路由、vuex等
cd my-vue					// 进入项目文件夹
yarn serve					// 启动项目

若使用 eslint+prettier 进行代码格式校验，当因为报错 ‘xxxxx’ is defined but never used 而不能正常渲染的时候，可以在项目根目录下 .eslintrc.js 文件中添加一行

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
  parserOptions: {
    parser: "babel-eslint"
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-unused-vars": "off"  // 阻止'xxxxx' is defined but never used 报错不能渲染
  }
};

2 项目结构

public			// index.html
src-assets		// 静态资源
   -components	// 组件
   -router		// 路由设置
   -store		// 状态管理 vuex
   -views		// 页面
      -home		// 主页面(相当于初始化时的页面的容器)
	  -user		// home页面下的user子页面
	  -news		// home页面下的news子页面
	  -login	// 登录页面
	  -not-fount// 路由不匹配时的页面
   -App.vue		// 项目根组件
   -main.js		// 项目入口文件

3 配置路由

1 模块化路由配置

views 文件夹下新建 home/index.vue user/index.vue login/index.vue 三个文件，内容类似于

<template>
  <div class="home_container">
    <div>这是home主页面 {
  { msg }}</div>
    <router-view />

    <div style="margin-top:50px">
      <button class="btn" @click="goPage('User')">跳转到user</button>
      <button class="btn" @click="goPage('News')">跳转到News</button>
    </div>
    <div style="margin-top:20px">
      <button class="btn" @click="goPage('Login')">跳转到login</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "home页面的数据"
    };
  },
  methods: {
    goPage(val) {
      this.$router.push({ name: val, query: { id: "1" } });
    }
  }
};
</script>

<style lang="less" scoped>
.home_container {
  background-color: yellow;
  padding: 20px;
  .btn {
    width: 100px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border: 1px solid #000;
  }
}
</style>

router 文件夹下，新建 modules/home.js 模块化开发，配置home相关页面的路由

// home 模块路由

const HomeRoute = {
  // 注意：返回的格式是一个对象，不是一个数组！！
  path: "/",
  name: "Home",
  component: () => import("../../views/home/index.vue"),
  redirect: "/user",
  children: [
    {
      path: "user",
      name: "User",
      component: () =>
        import(/* webpackChunkName: "user" */ "../../views/user/index.vue"),
      meta: {
        title: "user页面"
      }
    },
    {
      path: "news",
      name: "News",
      component: () =>
        import(/* webpackChunkName: "news" */ "../../views/news/index.vue"),
      meta: {
        title: "new页面"
      }
    }
  ]
};

export default HomeRoute;

然后在 router/index.js 中引入