使用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>
   
   <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>组件来展示对应的组件内容

最终得到的效果