当前位置: 首页 > news >正文

Vue_cli搭建过程项目创建

概述

vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板;预先定义
好的目录结构及基础代码,就好比咱们在创建 Maven 项目时可以选择创建一个
骨架项目,这个骨架项目就是脚手架,我们的开发更加的快速;
(解释: 就是一个框架(相当于盖房子的骨架),然后就在这个骨架上面渲染骨架,最后达到想要的结果.)

需要运行的环境

Node.js
简单的说 Node.js 是一个前端 js 运行环境 或者说是一个 JS 语言解释器
npm
npm 是 Node.js 的包管理工具,用来安装各种 Node.js 的扩展。npm 是
JavaScript 的包管理工具,也是世界上最大的软件注册表。有超过 60 万个
JavaScript 代码包可供下载。npm 让 JavaScript 开发人员可以轻松地使用
其他开发人员共享的代码。
https://nodejs.org/en/download

在这个网址上面下载Node.js运行环境

然后进行以下操作

打开终端

输入这两个命令检验环境是否搭建成功.

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

打开文件里面的新建
    
选择项目
项目结构
如果项目中没有这个文件或者误删文件
就在控制台输入这行命令来导入,项目依赖的组件
npm install

创建好这个项目之后要删除无关示例代码以及文件
可以输入在控制台输入这行命令来防止以后创建的项目下载package-lock.json 这个文件]
npm config set package-lock false

删除App.vue这些示例代码留下基本框架
删除以上的东西留下的基本框架
让我们快速搭建一个Hello World项目
首先在src建立Index.vue, Login.vue, Reg.vue 这些文件
组件路由
vue router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建
单页面应用变得易如反掌。
安装
vue-router 是一个插件包,所以我们还是需要用 npm 来进行安装的。 打开命令行工具,进入你的项目目录,输入下面命令。
npm i vue-router@3.5.3

在控制台输入这行命令导入路由

搭建步骤:
1. 创建 router 目录
创建 index.js 文件,在其中配置路由
import Vue from 'vue';
import router from 'vue-router'; /* 导入路由 */
import login from '../views/login'; /* 导入其他组件 */
import content from '../components/content'; /* 导入其他组件 */
Vue.use(router)
/* 定义组件路由 */
var rout = new router({
routes: [
{
path: '/index',
name: 'index',
component: index
},
{
path: '/content',
component: content
}
]
});
// 导出路由对象
export default rout;
2.使用路由
<router-link to="/index"> 首页 </router-link>
<router-link to="/content"> 内容 </router-link>
<router-view/> 3.在 main.js 中配置路由
import router from './router/index.js'
Vue.use(router);
new Vue({
el: '#app',
router,
render: h => h(App)
})

3.在 main.js 中配置路由
import router from './router/index.js'
Vue.use(router);
new Vue({
el: '#app',
router,
render: h => h(App)
})
然后给这些组件定义路由地址用来切换组件
在src目录下创建一个router目录
在此目录下创建一个名为index.js 文件创建路由器
给组件定义地址
定义好这些组件的地址之后在main.js中导入组件 
在App.vue组件中的id为app的div标签加  <router-view></router-view>这个标签用来显示其他组件.
做好以上步骤来运行一下项目, 在控制台输入这行命令来运行项目
npm run serve

在控制台按住Ctrl+ c可以结束项目服务

这样就搭建好一个Hello World的示例项目

看一下效果

点击登录可以切换到登录组件,点击注册切换到注册组件
http://www.lryc.cn/news/383991.html

相关文章:

  • 面试题4:POST 比 GET 安全?
  • Github生成Personal access tokens及在git中使用
  • 【BUG记录】条件查询没有查询结果 || MybatisPlus打印查询语句
  • 【C#】找不到属性集方法。get只读属性用了反射设置setValue肯定报错
  • 探索ChatGPT在程序员日常工作的多种应用
  • 算法与数据结构——时间复杂度详解与示例(C#,C++)
  • 面试题3:GET 和 POST 有什么区别?
  • 探索QCS6490目标检测AI应用开发(三):模型推理
  • C# 静态类中构造、字段和属性等的执行顺序,含有单例模式分析
  • c++设计模式之一创建型模式
  • 上古世纪台服注册账号+下载客户端全方位图文教程
  • 【Android】Android中继承Activity、Application和AppCompatActivity的区别
  • SQLite 可以随可执行文件部署在用户机器吗
  • 大模型的开源不同于传统的开源软件
  • 基于PHP+MySql的留言管理系统的设计与实现
  • 单目标应用:基于吸血水蛭优化器(Blood-Sucking Leech Optimizer,BSLO)的微电网优化(MATLAB代码)
  • 嵌入式工程师从0开始,到底该学什么,怎么学
  • Redis-集群-环境搭建
  • ITSG、COST-G、Tongji和WHU Level-2数据产品读取绘图(Matlab)
  • linux(ubuntucentos)-安装libreoffice
  • 上海市计算机学会竞赛平台2023年9月月赛丙组点对之和(一)
  • maven-jar-plugin在springboot中打包成普通引用的jar
  • 小型海外仓布局策略:高效利用有限空间,标准化3F流程
  • 【高考志愿】电气工程
  • 贪吃蛇项目:GameRun与GameEnd部分:游戏的主体运行与善后部分
  • mysql索引、事务以及存储引擎
  • idea添加文档注释
  • python函数练习
  • 基于PHP的奶茶商城系统
  • 物联网“此用户无权修改接入点名称设置”解决方案