Luffy - 前台搭建
一:创建项目
- 创建
vue
项目
注意:这里的项目名只能全部小写
vue create luffycity
-
剩余创建步骤
注意:先看这里!- 创建项目的时候,如果觉得自己代码写得很规范的,可以开启
ESLint
- 如果是刚开始接触Vue,建议在项目创建的时候,不要开启
ESLint
开启了
ESLint
,就相当于开启了严格模式,以下情况都会报错:- 多1个,
- 多1个空格
- 缩进不正确
- 存在:已经导入 但未被使用的组件
etc...
- 创建项目的时候,如果觉得自己代码写得很规范的,可以开启
具体创建步骤:看这里
二:配置
1. 目录结构
2. 文件解析
① App.vue
(初始)
<template>
<div id="app">
<div id="nav">
<!-- 路由跳转到根组件 -->
<router-link to="/">Home</router-link> |
<!-- 路由跳转到about组件 -->
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
</template>
<style>
<!-- 这里编写CSS代码 -->
...
</style>
<script>
// 这里编写JS代码
...
</script>
<router-link to="/">Home</router-link>
这个相当于a链接
不同之处:
- 因为
Vue
是单页面开发,router-link
只会在组件之间来回切换 a链接
会跳转到其他页面
② src/router/index.js
(初始)
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue' // 导入Home组件
Vue.use(VueRouter)
const routes = [
{
path: '/', // 设置跟路由路径:/
name: 'Home',
component: Home // 跟路由组件为Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
③ src/main.js
整个项目的入口js
文件
- 这是1个很重要的配置文件
- 配置了根组件、路由跳转
- 可以全局导入
CSS
、JS
- 导入的
CSS
和JS
可以来自assets
,也可以来自node_modules
(推荐)
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
import router from './router'
当前路径下的router
相当于1个包,导包的时候相当于先执行了__init__/index.js
3. 目录配置
目录文件修改
- 在
src
的assets
下创建css
、js
、img
文件夹 - 删除
src
的components
下的所有文件 - 删除
views
页面组件中用到components
的代码
4. 安装、导入配置
以下安装,如果用
npm
觉得速度慢的,可以用cnpm
安装
npm
后如果加上了--save
选项,可以省掉手动修改package.json
文件的步骤
① 配置全局初始化CSS
样式
在src/assets/css
下创建global.css
,输入如下代码
/* 声明全局样式和项目的初始化样式 */
body, h1, h2, h3, h4, h5, h6, p, table, tr, td, ul, li, a, form, input, select, option, textarea {
margin: 0;
padding: 0;
font-size: 15px;
}
a {
text-decoration: none;
color: #333;
}
ul {
list-style: none;
}
table {
border-collapse: collapse; /* 合并边框 */
}
配置:main.js
// 使用 global.css
import './assets/css/global.css'
② Axios
- 用于前后端交互
安装
npm install axios --save
配置:main.js
// Axios 配置
import axios from 'axios'
Vue.prototype.$axios = axios;
③ vue-cookies
安装
npm install vue-cookies --save
配置:main.js
// vue-cookie 配置
import cookies from 'vue-cookies'
Vue.prototype.$cookies = cookies
④ Element UI
- 饿了么团队开发的 1个好看的基于Vue的UI
安装
npm install element-ui --save
配置:main.js
// ElementUI 配置
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
⑤ JQuery
Vue
不推荐使用JQuery
,所以引用的方式和其他的不大一样
安装
npm install jquery --save
在项目根路径下创建:vue.config.js
const webpack = require("webpack");
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
"window.$": "jquery",
Popper: ["popper.js", "default"]
})
]
}
};
⑥ popper.js
npm install popper.js --save
⑦ Bootstrap
Bootstrap
需要依赖上面的JQuery
和popper.js
安装
npm install bootstrap --save
配置:main.js
// Bootstrap 配置
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
⑧ 配置全局自定义设置
在src/assets/js
下创建settings.js
,输入如下代码
export default {
base_url: 'http://127.0.0.1:8000'
}
配置:main.js
// 配置全局自定义设置
import settings from './assets/js/settings'
Vue.prototype.$settings = settings;
在所有需要与后台交互的组件中:
this.$settings.base_url + '再拼接具体后台路由'
把
settings
赋值给了Vue.prototype.$settings
,以后this.$settings.base_url
可以直接拿到127.0.0.1:8000
5. 整体main.js
配置(无注释)
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './assets/css/global.css'
import settings from './assets/js/settings'
import axios from 'axios'
import cookies from 'vue-cookies'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
Vue.prototype.$settings = settings
Vue.prototype.$cookies = cookies
Vue.prototype.$axios = axios
Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')