【9.0】路飞项目前端搭建

【一】Vue2创建项目

• 创建项目

vue create lufycity_web

• 选择Vue版本(2.0)

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)   
> normal ([Vue 2] babel, router, vuex)     
  vue3.0_cli ([Vue 3] babel, router, vuex) 
  Default ([Vue 3] babel, eslint) 
  Default ([Vue 2] babel, eslint) 
  Manually select features 

• 创建成功

Vue CLI v5.0.8
✨  Creating project in E:\Old Boy\luffy\lufycity_web.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...


added 844 packages in 3m
🚀  Invoking generators...
📦  Installing additional dependencies...


added 7 packages in 2m
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project lufycity_web.
👉  Get started with the following commands:  

 $ cd lufycity_web
 $ npm run serve

【二】运行Vue项目

• 这里使用pycharm进行编写
  • 记得修改启动文件

【三】调整Vue项目

【1】删除组件HelloWorld

• lufycity_web\src\components\HelloWorld.vue

【2】删除视图AboutView

• lufycity_web\src\views\AboutView.vue

【3】删除注册路由

• 删除以下内容

 {
    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/AboutView.vue')
  }

【四】第三方组件加载

【1】安装axios

• axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js的ajax请求
• 它可以在浏览器端和服务器端都能使用，大大简化了HTTP请求的操作。

cnpm install -S axios

【2】安装elementui

• Element UI 是一套基于Vue.js的桌面端组件库，提供了一系列常用的UI组件，例如按钮、输入框、表格、对话框等。
• 它具有美观易用的特点，并且支持多语言、响应式布局等功能。

cnpm install elementui@2.9.2 -S 

cnpm view element-ui versions

[
  '0.1.0',         '0.1.1',        '0.1.2',         '0.1.3',
  '0.1.4',         '0.1.5',        '0.1.6',         '0.1.7',
  '0.1.8',         '0.1.9',        '0.2.0',         '0.2.1',
  '0.2.2',         '0.2.3',        '0.2.4',         '0.2.5',
  '0.2.6',         '1.0.0-rc.1',   '1.0.0-rc.2',    '1.0.0-rc.3',
  '1.0.0-rc.4',    '1.0.0-rc.5',   '1.0.0-rc.6',    '1.0.0-rc.7',
  '1.0.0-rc.8',    '1.0.0-rc.9',   '1.0.0',         '1.0.1',
  '1.0.2',         '1.0.3',        '1.0.4',         '1.0.5',
  '1.0.6',         '1.0.7',        '1.0.8',         '1.0.9',
  '1.1.0',         '1.1.1',        '1.1.2',         '1.1.3',
  '1.1.4',         '1.1.5',        '1.1.6',         '1.2.0',
  '1.2.1',         '1.2.2',        '1.2.3',         '1.2.4',
  '1.2.5',         '1.2.6',        '1.2.7',         '1.2.8',
  '1.2.9',         '1.3.0-beta.2', '1.3.0-beta.3',  '1.3.0',
  '1.3.1',         '1.3.2',        '1.3.3',         '1.3.4',
  '1.3.5',         '1.3.6',        '1.3.7',         '1.4.0-beta.1',
  '1.4.0',         '1.4.1',        '1.4.2',         '1.4.3',
  '1.4.4',         '1.4.5',        '1.4.6',         '1.4.7',
  '1.4.8',         '1.4.9',        '1.4.10',        '1.4.11',
  '1.4.12',        '1.4.13',       '2.0.0-alpha.1', '2.0.0-alpha.2',
  '2.0.0-alpha.3', '2.0.0-beta.1', '2.0.0-rc.1',    '2.0.0',
  '2.0.1',         '2.0.2',        '2.0.3',         '2.0.4',
  '2.0.5',         '2.0.6',        '2.0.7',         '2.0.8',
  '2.0.9',         '2.0.10',       '2.0.11',        '2.1.0',
  '2.2.0',         '2.2.1',        '2.2.2',         '2.3.0',
  '2.3.1',         '2.3.2',        '2.3.3',         '2.3.4',
  '2.3.5',         '2.3.6',        '2.3.7',         '2.3.8',
  '2.3.9',         '2.4.0',        '2.4.1',         '2.4.2',
  '2.4.3',         '2.4.4',        '2.4.5',         '2.4.6',
  '2.4.7',         '2.4.8',        '2.4.9',         '2.4.10',
  '2.4.11',        '2.5.0',        '2.5.1',         '2.5.2',
  '2.5.3',         '2.5.4',        '2.6.0',         '2.6.1',
  '2.6.2',         '2.6.3',        '2.7.0',         '2.7.1',
  '2.7.2',         '2.8.0',        '2.8.1',         '2.8.2',
  '2.9.0',         '2.9.1',        '2.9.2',         '2.10.0',
  '2.10.1',        '2.11.0',       '2.11.1',        '2.12.0',
  '2.13.0',        '2.13.1',       '2.13.2',        '2.14.0',
  '2.14.1',        '2.15.0',       '2.15.1',        '2.15.2',
  '2.15.3',        '2.15.4',       '2.15.5',        '2.15.6',
  '2.15.7',        '2.15.8',       '2.15.9',        '2.15.10',
  '2.15.11',       '2.15.12',      '2.15.13'
]

【3】安装vue-cookies

• vue-cookies是一个用于在Vue.js中处理cookie的插件。
• 它提供了一组API来操作cookie，例如读取、设置、删除等功能，帮助您在Vue.js项目中更方便地管理cookie数据。

cnpm install -S vue-cookies

【4】查看组件安装版本信息

• package.json

  "dependencies": {
    "axios": "^1.4.0",
    "core-js": "^3.8.3",
    "element-ui": "^2.9.2",
    "vue": "^2.6.14",
    "vue-cookies": "^1.8.3",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2"
  },

【五】配置引入

• main.js
  • main.js 配置,全局生效

// 引入ElementUI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 使用ElementUI
Vue.use(ElementUI);

// 引入axios
import axios from 'axios';
// 使用axios
Vue.prototype.$axios = axios;

// 引入vue-cookies
import cookies from 'vue-cookies';
// 使用vue-cookies
Vue.prototype.$cookies = cookies;

• 使用

this.$axios

this.$cookies

【六】全局路由头配置

• lufycity_web\src\assets\js\settings.js

// 配置默认路由前缀
export default {
    BASE_URL: 'http://127.0.0.1:8000/api/v1/'
}

• lufycity_web\src\main.js
  • main.js 配置,全局生效

// 引入全局路由
import settings from "@/assets/js/settings";
// 使用全局路由
Vue.prototype.$settings = settings;

• 使用

this.$settings.BASE_URL

【七】全局前端样式配置

• html的标签a ul li ，都会有默认样式
  • 正常的前端，都会去掉所有标签的默认样式， 自己写样式
• lufycity_web\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; /* 合并边框 */
}

• lufycity_web\src\main.js
  • main.js 配置,样式全局生效

// 使用全局样式，取出所有标签默认样式
import '@/assets/css/global.css'