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')
相关推荐
天蓝色的鱼鱼32 分钟前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping33 分钟前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙2 小时前
[译] Composition in CSS
前端·css
白水清风2 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix2 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278002 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端2 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧2 小时前
Promise 的使用
前端·javascript
NBtab2 小时前
Vite + Vue3项目版本更新检查与页面自动刷新方案
前端
天天扭码2 小时前
来全面地review一下Flex布局(面试可用)
前端·css·面试