前端项目搭建

一只特立独行的？

已于 2023-06-02 20:13:09 修改

阅读量848

点赞数

分类专栏：前端文章标签：前端 vue.js

于 2023-06-02 19:05:25 首次发布

本文链接：https://blog.csdn.net/qq_56797899/article/details/131009144

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

4.app.vue中<-router-view>标签

elementUI

1.下载elementUI

2.配置elementUI

vue-cli

传统的web项目中一个页面就是一个html文件，各个文件之间都是独立的，想要进行公共的操作 -(如判断用户是否登录)就需在每个页面中都编写判断代码，工作量大。此结构的web项目就被淘汰了，没有全局的配置方式

现在的前端推出一种新的架构思想

单页面架构 + 组件

一个项目中只有一个html文件，在html中切换不同的组件，很方便的进行一些全局配置。

搭建前端新的项目结构

前提：需要一个前端的运行环境 Node.js

下载 | Node.js 中文网

这样即安装成功

npm

npm是node.js的包管理工具，用来安装各种node.js的扩展，npm是javascript的包管理工具，也是世界上最大的软件注册表。npm让JavaScript开发人员可以轻松使用其他开发人员的共享代码。

使用hbulider创建一个前端项目

在终端中，使用 npm run serve命令启动前端项目

mian.js中的app与index中的app挂载

组件

一个组件的内容要写在在一个div中，再放在<template>中

一个<template>就表示一个组件，一个组件对应一个script

template只能有一个根标签

格式

创建一个组件 Login 和 Main

<template>
	<div>
		登录{{message}}
	</div>
</template>

<script>
export default{ //导出组件
	data() { //定义数据
		return{
			message:"login",
			age:10
		}
	},
	methods:{ //函数
		test(){
			
		}
		
	},
	mounted() { //生命周期函数
		
	}
	
}
</script>
<!-- css -->
<style>
</style>

组件路由

vue router 是vue.js官方的路由管理器。

前端项目中，组件不能直接通过文件名访问，需借助vue组件中的路由功能。

1.安装下载vue router组件

让vue把所有的组件管理起来，并为每个组件配置一个映射地址

安装 vue-router 是一个插件包，所以我们还是需要用 npm 来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。

npm i vue-router@3.5.3

2.配置路由

src下创建router目录
目录下创建一个index.js文件
配置路由在index.js中

import Vue from 'vue';
import router from 'vue-router'; /* 导入路由 */

/* 导入自己的组件 */
import Login from "../Login.vue"; 
import Main from "../Main.vue"; // ../上一级

Vue.use(router) //vue支持使用router组件

/* 定义组件路由 */
var rout = new router({  //新建router对象
    routes: [   //组件映射
        {
            path: '/login',  //为组件定义地址
            name: 'name',	 //组件起名  可不写
            component: Login //对应那个组件
        },
        {
            path: '/main',
            component: Main
        }
    ]
});
//导出路由对象 
export default rout;

3.main.js中配置路由组件

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

//导入路由组件  router自己定义的名字  ./同一目录下的...文件
import router from './router/index.js';
Vue.use(router);




new Vue({
  render: h => h(App),
  router,  
}).$mount('#app')

4.app.vue中<-router-view>标签


<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
     <!-- 在此标签上，用来切换不同的组件 -->
    <router-view></router-view>
  </div>
</template>
<script>


export default {
  
  
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

elementUI

1.下载elementUI

安装 ElementUI

npm i element-ui -S

2.配置elementUI

再main.js中配置 elementUI

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

//导入路由组件  router自己定义的名字  ./同一目录下的...文件
import router from './router/index.js';
Vue.use(router);

//导入 element mui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';


Vue.use(ElementUI);




new Vue({
  render: h => h(App),
  router,  
}).$mount('#app')

配置完成后，就可从 element-ui中复制代码到自己的项目中。

<template>
	<div class="login_container">
		     <!-- 登录盒子-->
		     <div class="login_box">
		          <!-- 头像盒子-->
		          <div class="img_box">
		                <img src="./assets/logo.png" />
		          </div>
				  <div style="margin-top: 100px; padding: 20px;">
					  <el-form ref="form"  label-width="80px">
					    <el-form-item label="账号">
					      <el-input ></el-input>
					    </el-form-item>
					    <el-form-item label="密码">
					      <el-input ></el-input>
					    </el-form-item>
					    <el-form-item>
					      <el-button type="primary"  @click="login()">登录</el-button>
					      <el-button >取消</el-button>
					    </el-form-item>
					  </el-form>
				  </div>
		     </div>
	</div>

</template>