Luffy 前臺搭建

一：建立專案

1.建立vue專案
注意：這裡的專案名只能全部小寫
vue create luffycity
2.剩餘建立步驟
注意：先看這裡！

建立專案的時候，如果覺得自己程式碼寫得很規範的，可以開啟ESLint
如果是剛開始接觸Vue，建議在專案建立的時候，不要開啟ESLint
開啟了ESLint，就相當於開啟了嚴格模式，以下情況都會報錯：

多1個,
多1個空格
縮排不正確
存在：已經匯入但未被使用的元件
etc…
具體建立步驟：看以前部落格

二：配置
1.目錄結構

2.檔案解析

① App.vue（初始）
複製程式碼

Home | About

複製程式碼
Home這個相當於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’)
複製程式碼
3.目錄配置

目錄檔案修改
在src的assets下建立css、js、img資料夾
刪除src的components下的所有檔案

4.安裝、匯入配置
以下安裝，如果用npm覺得速度慢的，可以用cnpm安裝

① 配置全域性初始化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
配置：main.js
// Axios 配置
import axios from ‘axios’
Vue.prototype. $a x i o s = a x i o s; ③ v u e - c o o k i e s 安裝 n p m i n s t a l l v u e - c o o k i e s 配置： m a i n . j s / / v u e - c o o k i e 配置 i m p o r t c o o k i e s f r o m^{'} v u e - c o o k i e s^{'} V u e . p r o t o t y p e .$ cookies = cookies
④ Element UI - 餓了麼團隊開發的 1個好看的基於Vue的UI
安裝
cnpm install element-ui
配置：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
在專案根路徑下建立：vue.config.js
複製程式碼
const webpack = require(“webpack”);

module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: " j q u e r y ", j Q u e r y : " j q u e r y ", " w i n d o w . j Q u e r y " : " j q u e r y ", " w i n d o w .$ ": “jquery”,
Popper: [“popper.js”, “default”]
})
]
}
};
複製程式碼
⑥ Bootstrap
安裝
npm install bootstrap
配置：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. $s e t t i n g s = s e t t i n g s; 在所有需要與後臺交互的組件中： t h i s .$ settings.base_url + ‘再拼接具體後臺路由’

把settings賦值給了Vue.prototype. $s e t t i n g s ，以後 t h i s .$ 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. $s e t t i n g s = s e t t i n g s V u e . p r o t o t y p e .$ cookies = cookies;
Vue.prototype.$axios = axios;

Vue.config.productionTip = false

Vue.use(ElementUI);

Luffy 前臺搭建

相關文章