vue-cli搭建过程

1.vue-cli 概述

vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板,预先定义好的目录结构及基础代码
举个例子吧!

比如之前学过的Maven,在创建 Maven 项目时可以选择创建一个骨架项目,这个骨架项目就是脚手架,我们的开发更加的快速

2.主要的功能

①统一的目录结构
②本地调试
③ 热部署
④单元测试
⑤集成打包上线

3.需要的环境

①Node.js

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

②npm

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


使用 HbuilderX 快速搭建一个 vue-cli 项目

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

启动项目命令:npm run serve
启动成功后,会出现访问项目地址: http://127.0.0.1:8080/
在命令行中 ctrl+c 停止服务
具体命令需要看配置文件中如何定义

4.组件路由

vue router 是 Vue.js 官方的路由管理器,它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌
● 安装

vue-router 是一个插件包,所以我们还是需要用 npm 来进行安装的


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

5.vue-cli搭建具体步骤

先删除一些文件

①删除src目录下的components

②删除package-lock.json

③打开src目录下的App.vue

删除选中的内容并修改

第一步:创建组件

举例三个组件分别为登录组件,注册组件和首页组件,在src目录下面创建以下三个组件文件

第二步:在index.js中配置路由

创建 router 目录,在router 目录下面创建 index.js 文件,在其中配置路由

javascript 复制代码
/* 为组件配置路由地址 */
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;

第三步:在 main.js 中配置路由

在src目录下找到 main.js文件,在其中配置路由

javascript 复制代码
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')
相关推荐
~无忧花开~10 小时前
CSS学习笔记(五):CSS媒体查询入门指南
开发语言·前端·css·学习·媒体
程序猿小D10 小时前
【完整源码+数据集+部署教程】【零售和消费品&存货】价格标签检测系统源码&数据集全套:改进yolo11-RFAConv
前端·yolo·计算机视觉·目标跟踪·数据集·yolo11·价格标签检测系统源码
吴鹰飞侠10 小时前
AJAX的学习
前端·学习·ajax
JNU freshman10 小时前
vue 技巧与易错
前端·javascript·vue.js
北冥有鱼10 小时前
Vue3 中子组件修改父组件样式之—— global() 样式穿透使用指南
vue.js
落一落,掉一掉10 小时前
第十二周 waf绕过和前端加密绕过
前端
Asort10 小时前
JavaScript设计模式(十六)——迭代器模式:优雅遍历数据的艺术
前端·javascript·设计模式
Coffeeee10 小时前
Labubu很难买?那是因为还没有用Compose来画一个
前端·kotlin·android jetpack
我是日安10 小时前
从零到一打造 Vue3 响应式系统 Day 28 - shallowRef、shallowReactive
前端·javascript·vue.js
开源之眼10 小时前
深入理解 JavaScript 报错:TypeError: undefined is not a function
前端·javascript