07 前台项目创建及配置

183次阅读
没有评论

共计 1327 个字符,预计需要花费 4 分钟才能阅读完成。

一. 创建前台项目及项目目录重构

创建一个 Vue 项目, 前面文章详细介绍了如何创建一个 Vue 项目👉Vue-cli 创建项目

  • 整体流程
# 1. 傻瓜式安装 node: 
官网下载:https://nodejs.org/zh-cn/

# 2. 安装 cnpm: 
npm install -g cnpm --registry=https://registry.npm.taobao.org

# 3. 安装 vue 最新脚手架: 
>: cnpm install -g @vue/cli

## 注:如果 2、3 步报错,清除缓存后重新走 2、3 步
>: npm cache clean --force

# 4. 创建项目
在目标目录新建 luffy 文件夹
cd 建立的 luffy 文件夹
vue create luffycity

二. 文件修订

1. 将目录中非配置文件的多余文件删除

2. 将组件文件或其他配置文件内无关内容删除

  • App.vue : 根组件
<template>
    <div id="app">
        <router-view/>
    </div>
</template>
  • router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter);

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/home',
        redirect: '/',
    },
];

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router
  • Home.vue
<template>
    <div class="home">
    </div>
</template>

<script>
    export default {
        name: 'home',
        components: {},}
</script>

三. 全局配置 : 全局样式及配置文件

1.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; /* 合并边框 */}

2.settings.js

export default {base_url: 'http://127.0.0.1:8000'}

3.main.js

// 配置全局样式
import '@/assets/css/global.css'

// 配置全局自定义设置
import settings from '@/assets/js/settings'
Vue.prototype.$settings = settings;
// 在所有需要与后台交互的组件中:this.$settings.base_url + '再拼接具体后台路由'
正文完
 
shawn
版权声明:本站原创文章,由 shawn 2023-06-16发表,共计1327字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)