首页 前端知识 使用HbuilderX快速搭建vue-cil项目

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

2024-08-27 09:08:03 前端知识 前端哥 738 521 我要收藏

前言

        在搭建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 vue-router@3.5.3
npm i vue-router@3.5.3

        下载成功后我们可以在项目的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>组件来展示对应的组件内容

        最终得到的效果

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17035.html
标签
评论
发布的文章

jQuery 小技巧教程

2024-09-08 02:09:07

jQuery HashChange 插件指南

2024-09-08 02:09:07

jQuery-HAML 使用教程

2024-09-08 02:09:06

初识Jquery

2024-05-10 08:05:00

jQuery PJAX 使用教程

2024-09-08 02:09:03

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!