项目流程
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;
}