Luffy之前端项目部署搭建

时间：2023-03-09 20:34:06
Luffy之前端项目部署搭建

1. 搭建前端项目

1.1 创建项目目录

cd 项目目录

vue init webpack lufei

根据需要在生成项目时，我们选择对应的选项, 效果：

Luffy之前端项目部署搭建

根据上面的提示，我们已经把vue项目构建好了，接下来我们可以在pycharm编辑器中把项目打开并根据上面黄色提示，运行测试服务器。

打开项目已经，在pycharm的终端下运行vue项目，查看效果。

npm run dev

1.2 初始化前端项目

清除默认的HelloWorld组件和APP.vue中的默认样式

1.3 安装路由vue-router

1.3.1 下载路由组件

npm i vue-router -S

效果如图:

Luffy之前端项目部署搭建

1.3.2 配置路由

1.3.2.1 初始化路由对象

在src目录下创建routers路由目录，在routers目录下创建index.js路由文件

index.js路由文件中，编写初始化路由对象的代码 .

import Vue from "vue"

import Router from "vue-router"

// 这里导入可以让让用户访问的组件

Vue.use(Router);

export default new Router({

  // 设置路由模式为‘history’，去掉默认的#

  mode: "history",

  routes:[

    // 路由列表

  ]

})

1.3.2.2 注册路由信息

打开main.js文件，把router对象注册到vue中.

代码：

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'

import App from './App'

import router from './routers/index';

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

  el: '#app',

  router,

  components: { App },

  template: '<App/>'

});

1.3.2.3 在视图中显示路由对应的内容

在App.vue组件中，添加显示路由对应的内容。

代码如下:

<template>

  <div id="app">

    <router-view/>

  </div>

</template>

<script>

export default {

  name: 'App',

  components: {

  }

}

</script>

<style>

</style>

1.4 引入ElementUI

npm i element-ui -S

上面的命令等同于 npm install element-ui --save

1.4.2 配置ElementUI到项目中

在main.js中导入ElementUI，并调用。

代码：

// elementUI 导入

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

// 调用插件

Vue.use(ElementUI);

成功引入了ElementUI以后，接下来我们就可以开始进入前端页面开发，首先是首页。

接下来我们把之前完成的首页，直接拿过来使用[注意除了组件以外,还有静态文件也需要拿过来,包括App.vue里面的公共样式]，并运行项目。

Luffy之前端项目部署搭建

相关文章