Luffy 前台搭建

一：创建项目

 

1.创建vue项目

注意：这里的项目名只能全部小写

vue create luffycity

2.剩余创建步骤

注意：先看这里！

• 创建项目的时候，如果觉得自己代码写得很规范的，可以开启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')

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.$axios = axios;

③ vue-cookies

安装

npm install vue-cookies

配置：main.js

// vue-cookie 配置
import cookies from 'vue-cookies'
Vue.prototype.$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({
                $: "jquery",
                jQuery: "jquery",
                "window.jQuery": "jquery",
                "window.$": "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.$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')