Vue-cil(脚手架,版本:2.6.10)的搭建过程(项目创建,组件路由)

写代码的小能手

于 2024-08-25 19:52:55 发布

阅读量557

点赞数 20

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2303_77640525/article/details/141530511

版权

一.前端项目结构的对比

1.传统的前端项目结构

一个项目中有许多html文件，每一个html文件都是相互独立的，如果需要在页面中导入一些外部依赖的组件(vue.js, css), 就需要在每一个html文件中都需要导入,非常麻烦，而且都需要我们去官网自己下载.

2.现在的前端项目结构

二.什么是 vue-cil

vue-cli 官方提供的一个脚手架，用于快速生成一个 vue 的项目模板；预先定义好的目录结构及基础代码，就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架，我们的开发更加的快速；

三.主要的功能

1. 统一的目录结构

2. 本地调试

3. 热部署

4. 单元测试

5. 集成打包上线

四.需要的环境（前提）

1.Node.js

简单的说 Node.js 是一个前端 js 运行环境或者说是一个 JS 语言解释器。

官网地址： https://nodejs.org/en/download

下载完成后，在控制台输入以下命令测试是否安装成功，若一致，则成功了

2.npm

npm 是 Node.js 的包管理工具，用来安装各种 Node.js 的扩展。npm 是JavaScript 的包管理工具，也是世界上最大的软件注册表。有超过 60 万个JavaScript 代码包可供下载。npm 让 JavaScript 开发人员可以轻松地使用其他开发人员共享的代码。

3.使用 HbuilderX 快速搭建

• 项目目录解读：

创建成功后,在命令行窗口启动项目,在左下角

运行：在控制台输入：npm run serve

启动成功后,会出现访问项目地址

在浏览器打开就会出现如下界面

关闭：在控制台按住“ctrl+c”即可

五.常用命令

• npm run serve

该命令用来运行项目，在创建项目中有演示.

• Ctrl + C

在终端Ctrl+C，选择是否结束运行项目

• npm install

下载并安装项目依赖，即node_modules 。由于项目的大小90%都是项目依赖所占用，所以通常在给别人发送我们的代码时不用发送node_modules文件夹，对方在接收后通过在终端输入npm install命令进行手动下载项目依赖。

在下载之前需要先删除 package-lock.json 文件

如果package-lock.json 文件删除后仍然出现，可以在终端输入命令：
npm config set package-lock false

• npm run build

用来打包项目，生成一个dist文件夹，类似于maven的打包功能。

六.创建项目的需要

1.创建组件

1）创建组件的基本模板

<template>
	<div>
		
		
	</div>
</template>

<script>
    //导出组件
	export default{
		data(){
			return{
				
			}
		},
		methods:{
			
		}
	}
</script>

<style>
//css样式
</style>

2) 删除components文件夹，在src文件夹中新建vue文件

3)新建index.js文件

·在终端下载router组件

打开命令行工具，进入你的项目目录，输入命令： npm i vue-router@3.5.3

若输入后，运行不成功，可以输入：

npm config set registry https://mirrors.huaweicloud.com/repository/npm/

然后再输入： npm i vue-router@3.5.3

下载成功后在项目的package.json文件中会添加 "vue-router" : "^3.5.3" ，表明下载安装成功。

2.组件路由

在index.js中配置路由

这里创建了三个vue组件，分别是Index.vue、Login.vue、Reg.vue。要实现组件路由需要先在index.js中导入这三个组件，并为其定义一个访问地址，其通常由path和component两个部分组成，path用来定义component所绑定的组件地址。component后的组件名必须和import后的名字对应相同。


import Vue from 'vue';
// 导入路由
import router from 'vue-router'; 
// 导入其他组件
import Index from '../Index.vue'; /* 导入组件 */
import Login from '../Login.vue'; /* 导入组件 */
import Reg from '../Reg.vue';     /* 导入组件 */
 
Vue.use(router);
 
/* 定义组件路由 */
var rout = new router({
	routes: [
        //这个是设置默认的网页
        {
			path: "/",
			component: Index
		},
		{
			path: '/index',
			component: Index
		},
		{
			path: '/login',
			component: Login
		},
		{
			path: '/reg',
			component: Reg
		}
	]
});
//导出路由对象
export default rout;

这里默认首次启动项目访问的是Index.vue组件，所以在Index.vue组件中使用<router-link>组件来创建Reg.vue和Login.vue组件的导航链接

在main.js中配置路由

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

Vue.config.productionTip = false
//导入组件路由
import router from './router/index.js'
Vue.use(router);

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

最后通过<router-view>组件来展示对应的组件内容

本篇文章讲述了开发环境的安装以及如何使用vue脚手架搭建前端项目，希望对大家有所帮助，若文章有错误的地方，欢迎大家指出，一起探讨学习，今天的分享就到这里，别忘了给小博主一键三连，你的鼓励就是我的动力，不见不散。

写代码的小能手

关注

20
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
Vue-cil(脚手架,版本:2.6.10)的搭建过程(项目创建,组件路由)

本篇文章讲述了开发环境的安装以及如何使用vue脚手架搭建前端项目，希望对大家有所帮助，若文章有错误的地方，欢迎大家指出，一起探讨学习，今天的分享就到这里，别忘了给小博主一键三连，你的鼓励就是我的动力，不见不散。
复制链接

扫一扫