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 或 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)使用空格选择这几项,第一项没有也没关系
image-20220401143259850

(9)选择2.x
image-20220401143334286

(10)输入y
image-20220401143547082

(11)选择node-sass,如果没有的选选dart-sass也没事
image-20220401143631543
node-sass是自动编译实时的,dart-sass需要保存后才会生效。

(12)选择in dedicated config files
image-20220401143748249
In dedicated config files 在专用配置文件中
In package.json 在package.json中

(13)将此保存为将来项目的预设
image-20220401143845373

(14)进入项目所在目录cd projectuser 这个项目名是在(7)的时候创建的,,然后运行项目
image-20220403145018958

(15)此时会出现端口号
image-20220401144124678

(16)打开google浏览器,输入http://localhost:8080/即可

http://localhost:8080/

2.安装element-ui

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

(2)安装element-ui

npm i element-ui

image-20220319184910587

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

(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); //返回上一层
    },
}

效果:
image-20220403145753973

(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;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值