时间：2023-07-03 19:54:01 | 来源：网站运营
时间：2023-07-03 19:54:01 来源：网站运营
Luffy - 前台搭建：
在线咨询
全部小写 vue create luffycity剩余创建步骤觉得自己代码写得很规范的，可以开启ESLint刚开始接触Vue，建议在项目创建的时候，不要开启ESLint,空格缩进不正确已经导入 但未被使用的组件<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链接router-link只会在组件之间来回切换a链接会跳转到其他页面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 routerassets，也可以来自node_modules（推荐）import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'Vue.config.productionTip = falsenew Vue({ router, store, render: h => h(App)}).$mount('#app')目录配置src的assets下创建css、js、img文件夹src的components下的所有文件npm觉得速度慢的，可以用cnpm安装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.cssimport './assets/css/global.css'Axios - 用于前后端交互npm install axiosmain.js // Axios 配置import axios from 'axios'Vue.prototype.$axios = axios;vue-cookiesnpm install vue-cookiesmain.js // vue-cookie 配置import cookies from 'vue-cookies'Vue.prototype.$cookies = cookiesElement UI - 饿了么团队开发的 1个好看的基于Vue的UIcnpm install element-uimain.js // ElementUI 配置import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI); JQuerynpm install jqueryvue.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.jsnpm install --save popper.jsBootstrapJQuery和popper.js npm install bootstrapmain.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 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 = settingsVue.prototype.$cookies = cookiesVue.prototype.$axios = axiosVue.config.productionTip = falseVue.use(ElementUI);new Vue({ router, store, render: h => h(App)}).$mount('#app')关键词：前台
