vue项目流程

二氧化硅.

已于 2022-04-03 15:17:54 修改

阅读量2k

点赞数 2

文章标签： vue.js

于 2022-04-03 15:10:11 首次发布

本文链接：https://blog.csdn.net/m0_50918411/article/details/123937936

版权

项目流程

1.创建项目

（1）新建一个文件夹project（到时候创建的项目会放在这个文件夹里面）

（2）打开文件夹，在空白处按住shift的同时点击鼠标右键，点击“在此处打开Powershell窗口(S)”

（3）淘宝镜像（不是必须安装，速度可以快一点）
如果装了的话，后面命令中的npm全部要改成cnpm,此处我没有安装

npm install cnpm -g --registry=https://registry.npm.taobao.org

（4）如果已经全局安装了旧版本的 vue-cli(1.x 或 2.x)
此处我也没有安装过

npm uninstall vue-cli –g

（5）安装vue-cli3的包（有警告warn也没事）

npm install -g @vue/cli

（6）创建一个vue的项目，这个项目会放在一开始创建的project文件夹中，然后输入Y

vue create projectuser

（7）选择最后一项，自定义安装

（8）使用空格选择这几项，第一项没有也没关系

（9）选择2.x

（10)输入y

（11）选择node-sass，如果没有的选选dart-sass也没事

node-sass是自动编译实时的，dart-sass需要保存后才会生效。

（12）选择in dedicated config files

In dedicated config files 在专用配置文件中
In package.json 在package.json中

（13）将此保存为将来项目的预设

（14）进入项目所在目录cd projectuser 这个项目名是在（7）的时候创建的,，然后运行项目

（15）此时会出现端口号

（16）打开google浏览器，输入http://localhost:8080/即可

http://localhost:8080/

2.安装element-ui

（1）打开刚刚创建的项目的文件夹，按住shift的同时，点击鼠标右键，打开powershell窗口
这边要注意的是，打开的是创建的项目，而不是最开始自己新建的文件夹

（2）安装element-ui

npm i element-ui

（3）安装成功后能够在src同级的package.json中看到element-ui的版本

（4）在main.js 引入文件

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

（5）根据网址进行操作

https://element.eleme.cn/#/zh-CN/component/installation

3.安装Axios

（1）安装axios（在项目文件夹中按shift的同时点击右键打开powershell）

npm install axios

（2）在main.js 引入文件

import axios from 'axios';
Vue.prototype.$axios = axios;//将请求模块挂载到实例模型上

4.安装vuex

vuex （全局状态管理）管理的数据是多页面需要共享的数据
（1）安装vuex

npm install vuex --save

（2）在src 下新建store文件夹，然后新建 index.js 文件
（3）main.js 引入注册

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

（4）挂载vuex

import Vue from 'vue'
import Vuex from 'vuex'
vue.use(Vuex)

（5）创建vuex对象

const store = new Vuex.Store({
  state: {
    // 存放的键值对就是管理状态
    name: "hello"
  }
})
例
export default new Vuex.Store({
  state: {  url:"https://www.fastmock.site/mock/59b6f6c27e630b8f012ce26d1cc02210/api"
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

（6）取数据

this.$store.state.message
{{$store.state.message}}

5.配置联调文件

（1）新建config.js文件此文件在src下views同级
（2）在 config.js文件自定义配置文件，定义后台api地址

const config = {
     //后端api地址
     API_URL: "",
 };
export default config

这里可以在fastmook网站上建一个项目，模拟接口
接口根地址即为api地址

https://fastmock.site/#/login

（3）新建一个utils文件夹，此文件夹跟views同级
（4）在utils文件夹新建一个request.js 文件
（5）在request.js文件引入axios包

import request from "axios"

（6）在request.js文件将你新建的config.js文件引入进来

import config from "@/config"

（7）配置后台api地址，以及请求头token

const token = localStorage.getItem('token');
const service = request.create({
    baseURL: config.API_URL,
    headers: {
        "Authorization": token
    }
});

（8）封装axios response 响应参数，请求拦截

service.interceptors.response.use(
    response => {
        const res = response.data;
        return res
    },

    error => {
        console.log('err' + error);
        return Promise.reject(error)
    }
);

（9）导出

export default service

（10）新建一个api文件夹，在src文件夹下面
（11）新建接口模块文件后缀名为.js
例如我做的影院网站，可以命名为film,user等接口模块文件
（12）在你新建的接口模块文件，引入request.js 文件

import service from "../utils/request"

（13）配置相关接口

例如：export function Login(data){
    return service({
        url:'/api/user/login',
        method:'post',
        data:data
    })
}

配置联调文件后，就可以把所有的接口写在同一个地方啦

6.页面布局

（1）导入图片
将所有要用到的图片都放在src文件夹下的assets文件夹中
（2）页面公共布局
对于每个页面都会用到的部分，放在src下的components组件文件夹中
Layout.vue为页面公共布局
例如网页的头部和尾部都是一样的时候，就可以将头部和尾部分别写一个vue文件，放在components文件夹中
Header.vue和Footer.vue页面

<template>html内容模板元素</template>
<script>
export default{
data(){
    return{
        
    }
}}
</script>
<style lang="scss" scoped>层级样式 样式私有化，只对当前页面的样式生效</style>

Layout.vue页面(页面公共部分)

<template>
  <el-container>
    <el-header><Header></Header></el-header>
    <el-main><router-view></router-view></el-main>
    <el-footer><Footer></Footer></el-footer>
  </el-container>
</template>
<script>
import Header from "@/components/layout/Header.vue";
import Footer from "@/components/layout/Footer.vue";
export default {
  name: "Layout",
  components: {
    Header,
    Footer,
  },
};
</script>

（3）其他页面
写在views文件夹下
如果在头部和尾部都相同的情况下，还有公共布局
则在views文件夹下建新的文件夹例如film
在新建的文件夹下建index.vue为公共部分,在非公共部分区域写上路由跳转<router-view />
再在同一个文件夹下分别建其他的页面部分

7.配置路由

例如
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/Login.vue'//引入没有任何公共部分的登陆界面
import Register from '@/views/Register.vue'//引入没有任何公共部分的登陆界面
import Layout from '@/components/layout/Layout.vue'//引入公共布局头部和尾部
Vue.use(VueRouter)

const routes = [
  {
    path: '/login',
    name: 'login',
    component: Login
  },
  {
    path: '/register',
    name: 'register',
    component: Register
  },
  {
    path:'/',
    component:Layout,
    children:[//子路由
      {
        path:'',
        component:()=>import("@/views/Home")
      },
      {
        path:'/films',
        component:()=>import("@/views/Films")
      },
      {
        path:'/activity',
        component:()=>import("@/views/Activity")
      },
      {
        path:'/message',
        component:()=>import("@/views/Message")
      },
      {
        path:'/film',
        component:()=>import("@/views/film/Index.vue"),
        children:[//layout页面子路由下的film页面下的子路由
          {
          path:"detail",
          component:()=>import("@/views/film/Detail.vue"),
        },{
          path:"ticket",
          component:()=>import("@/views/film/Ticket.vue"),
        }]
      },
      {
        path:'/seat',
        component:()=>import("@/views/Seat")
      },
      {
        path:'/me',
        component:()=>import("@/views/me/Index.vue"),
        children:[
          {
          path:"cart",
          component:()=>import("@/views/me/Cart.vue"),
          },
          {
            path:"order",
            component:()=>import("@/views/me/Order.vue"),
          },
          {
            path:"setting",
            component:()=>import("@/views/me/Setting.vue"),
          }
        ]
      }         
    ]
  },
]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
export default router

8.接口

（1）在scr/api下的文件夹中配置好接口后，在相应的页面script部分引入

例
import { Login } from "../api/user";

（2）在方法中使用接口

getLogin() {
    const LoginData = {
        username: this.userName,
        password: this.passWord,
      };
      /* 客户端登录接口 */
      Login(LoginData).then((res) => {
        console.log(res);
        if (res.code == 200) {
          localStorage.setItem("token", res.data.token);
          localStorage.setItem("uid", res.data.user.id);
          this.$message({
            message: res.msg,
            type: "success",
          });
          this.$router.push("/");
        } else {
          this.$message({
            message: res.msg,
            type: "warning",
          });
        }
      });
    },

9.其他小技巧

（1）使用router-link跳转时不能到页面顶部
解决：在main.js中加入

/* router-link 跳转到页面顶部*/
router.afterEach((to, from, next) => {
  window.scrollTo(0, 0);
})

（2）点击链接后返回上一层
解决：使用组件-Element—PageHeader（页头）

<el-page-header @back="goBack" content="详情页面"></el-page-header>
methods: {
    goBack() {
      this.$router.go(-1); //返回上一层
    },
}

效果：

（3）页面左右有缝隙
解决：在layout.vue中的style部分设置padding:0

例
<style scoped>
* {
  width: 1519px;
  margin: 0 auto;
}
.el-header {
  padding: 0;
  height: 110px !important;
}
.el-main {
  overflow: auto;
  padding: 0;
  /* padding: 80px 0; */
}

.el-footer {
  padding: 0;
}
</style>

（4）文字链接的下划线删不掉
解决：~~（简单粗暴的方法）~~ 在app.vue的style中加入

a {
  text-decoration: none;
}

二氧化硅.

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
vue项目流程

项目流程1.创建项目（1）新建一个文件夹project（到时候创建的项目会放在这个文件夹里面）（2）打开文件夹，在空白处按住shift的同时点击鼠标右键，点击“在此处打开Powershell窗口(S)”（3）淘宝镜像（不是必须安装，速度可以快一点）如果装了的话，后面命令中的npm全部要改成cnpm,此处我没有安装npm install cnpm -g --registry=https://registry.npm.taobao.org（4）如果已经全局安装了旧版本的 vue-cli(1.x
复制链接

扫一扫