時間：2023-07-03 19:54:01 | 來源：網(wǎng)站運營
時間：2023-07-03 19:54:01 來源：網(wǎng)站運營
Luffy - 前臺搭建：
在線咨詢
全部小寫 vue create luffycity剩余創(chuàng)建步驟覺得自己代碼寫得很規(guī)范的，可以開啟ESLint剛開始接觸Vue，建議在項目創(chuàng)建的時候，不要開啟ESLint,空格縮進(jìn)不正確已經(jīng)導(dǎo)入 但未被使用的組件<template> <div id="app"> <div id="nav"> <!-- 路由跳轉(zhuǎn)到根組件 --> <router-link to="/">Home</router-link> | <!-- 路由跳轉(zhuǎn)到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>這個相當(dāng)于a鏈接router-link只會在組件之間來回切換a鏈接會跳轉(zhuǎn)到其他頁面import Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue' // 導(dǎo)入Home組件Vue.use(VueRouter)const routes = [ { path: '/', // 設(shè)置跟路由路徑：/ 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下創(chuàng)建css、js、img文件夾src的components下的所有文件npm覺得速度慢的，可以用cnpm安裝src/assets/css下創(chuàng)建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 - 餓了么團(tuán)隊開發(fā)的 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' 配置全局自定義設(shè)置src/assets/js下創(chuàng)建settings.js，輸入如下代碼export default { base_url: 'http://127.0.0.1:8000'}main.js // 配置全局自定義設(shè)置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')關(guān)鍵詞：前臺
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
