使用HbuilderX快速搭建vue-cil项目

前言

在搭建vue-cil项目前,我们需要了解:vue-cil官方会提供一个脚手架,用于快速生成一个vue的项目模版

但在使用脚手架构建项目有一个前提:

需要安装一个Node.js运行环境(Node.js是前端开发的一个环境) ,可以为前端开发提供服务. npm是Node.js的包管理工具,用来安装各种Node.js的扩展,是JavaScript的包管理工具

安装Node.js过程

在浏览器中打开

https://nodejs.org/en/download

网页内容显示


选择需要的版本


安装中出现窗口

选择安装位置

选择Disk Usage



测试

按window+R 打开窗口 输入cmd

在面板中输入node -v npm -v 查看是否安装完成 安装成功会显示当前的版本

创建项目

Node.js环境安装完成后,我们就开始创建项目,打开 **HBuilder X ,**左上方选择 文件 新建 项目

选择vue项目(2.6.10) ,选择文件放置的地址 点击创建

创建成功后,在右下角会出现 正在创建项目的提示

等待创建成功后,打开vue项目的终端输入 npm run serve指令回车进行运行


除了在终端中输入运行指令外,我们还可以右键点击 项目名称 外部命令 选择npm run serve

点击在外部浏览器中打开

如果打开是该页面,则表示Node.js环境安装和项目创建没问题

对项目结构的解读

常用命令

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的打包功能

创建组件过程

组件常用模版

<template>

<!-- 我们之前的html代码写在<template>标签中 -->

<div>

<!-- 组件中必须有一个跟标签 -->

</div>

</template>

<script>

// 这里不能new vue对象,要先导出组件(export)

export default{

data(){

return{

}

},

methods:{

}

}

</script>

<style>

/* css内容 */

</style>

组件路由

组件路由简单理解就是组件之间可以相互进行切换

而vue router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建
单页面应用变得易如反掌。
所以我们需要下载router组件:
在终端输入命令: npm i [email protected]

npm i [email protected]

下载成功后我们可以在项目的package.json文件中看到 "vue-router" : "^3.5.3" ,表示下载成功

在src目录下创建一个router包,并创建一个index.js文件

在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: '/index',

component: Index

},

{

path: '/login',

component: Login

},

{

path: '/reg',

component: Reg

}

]

});

//导出路由对象

export default rout;

我们默认首次启动项目访问的是index.vue组件,在index.vue组件中使用<router-link>组件来创建 Login.vue 和 Reg.vue组件的链接

在main.js中配置路由

import router from './router/index.js'
Vue.use(router);
new Vue({
el: '#app',
router,
render: h => h(App)
})

需要着重注意的部分

最后通过在App.vue文件中添加<router-view>组件来展示对应的组件内容

最终得到的效果

相关推荐
腾讯TNTWeb前端团队3 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
mghio5 小时前
Dubbo 中的集群容错
java·微服务·dubbo
范文杰7 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪7 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪7 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy8 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom8 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom8 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom8 小时前
React与Next.js:基础知识及应用场景
前端·面试·github