Skip to main content

项目简介与准备

1、简介#

说明

jiaahui-ui是一个基于Vue 2.X 的UI框架，我将通过记录jiaahui-ui的项目搭建过程，来梳理写Vue的UI框架的思路；很好的了解怎么自己去造轮子，最后并将其打包发布到npm

项目预览：jiaahui-ui

项目前提：进行该项目前需要你对Vue、WebPack、NodeJs、SCSS、Npm/yarn有基本的了解

2、建立远程仓库#

注意
  • (1)、根据自己是否需要多人远程协作完成项目来确定是否需要远程仓库
    • 在jiaahui-ui项目中将采用github作为远程仓库
  • (2)、根据项目是否开源设置仓库为Private私有仓库还是Public共享仓库
    • 在jiaahui-ui项目中将采用github远程仓库并设置成为Public
    • 如果将仓库设置Public即可以为项目添加开源协议许可license
    • 了解开源许可证更多

在jiaahui-ui项目中将采用github作为远程仓库并设置成为Public ；仓库名为：jiaahui-ui 开源协议：MIT License

2.1、创建Github仓库#

  • (1)、如下图操作，最后点击创建即可（创建后进入的页面先不要关，在初始化本地项目是会有用，先进入第二步骤） img

3、在本地初始化仓库#

3.1、克隆GitHub的仓库到本地#

  • (1)、通过如下命令将第一步创建的远程仓库克隆到本地（仓库地址替换成你自己地址）执行完成后即克隆到本地
    git clone git@github.com:is-zhou/jaahui-ui.git
    了解关联同步远程仓库Github详细操作

3.2、确认安装了node环境#

  • （1）、nodejs是一个基于v8引擎的javascript代码运行环境；如果没有安装请下载安装 官网下载nodejs
  • （2）、安装nodejs时会自动安装一个第三方模块管理工具npm

3.3、通过npm初始化项目依赖文件#

  • （1）、打开项目文件夹
  • （2）、在项目文件夹下打开命令行工具输入npm init回车后依次输入项目名、版本号、项目描述等信息 img
  • （3）、执行完上一步操作后即生成package.json项目依赖记录文件

3.4、将依赖文件提交的远程仓库#

  • （1）、项目文件夹下打开命令行工具依次输入如下命令，将package.json文件推送到远程
    git add .git commit -m "初始化项目的package.json文件"git push -u origin main

3.5、为仓库添加.gitignore文件#

.gitignore文件可以设置本地仓库哪些文件不需要上传到仓库

  • （1）、项目文件夹下创建.gitignore文件
  • （2）、该文件中默认就是项目根目录即当前目录，在此写下需要忽略的文件或目录即可
  • （3）、先创建.gitignore文件后边再根据项目添加 【了解.gitignore详细操作】

4、选择前端集成框架#

注意

(1)、项目需要根据项目的各种情况来定是使用什么样的前端集成框架

这个jiaahui-ui是一个基于vue的ui框架所以自然是选择Vue这个框架了

4.1、安装Vue框架#

  • （1）、通过npm直接安装前端集成框架vue（项目依赖）

    npm i vue#或npm i --save vue

    从npm 6.x版本开始默认就是 --save安装，所以 --save 可省略（查看npm版本命令：npm -v）

  • （2）、安装成功（此时项目文件夹下将生成一个node_modules文件夹即vue保存的地方）

    img

  • （3）、将node_modules文件夹添加到.gitignore中，打开.gitignore文件进行如下输入即表示忽略上传node_modules文件夹即该文件夹下所有文件 【点击了解.gitignore更多】

    node_modules/

    通常项目的node_modules目录下文件是不用上传到仓库的，因为该目录中安装了什么框架依赖，什么版本都将被记录在项目文件夹下的package.json ，package-lock.json文件中，当别人从远程仓库拉下该项目后通过npm install命令即可自动根据package.json ，package-lock.json文件中的记录自动安装相关的依赖

  • （4）、向远程从仓库提交一下当前项目（每完成一小阶段内容就可以提交一次）

    # 可以查看当前行增变化没有提交的文件git status

    img

    #依次执行如下代码向远程仓库推送文件git add .git commit -m "init .gitignore ,install vue"git push origin main

4.2、检验vue是否安装成功#

通过vscode打开项目文件夹进行开发

  • 项目根目录下新建index.html文件（在浏览器打开index.html文件显示"你好"即成功）
    <!-- <!DOCTYPE html><html lang="zh-Hans"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>jiaahui-ui</title></head><body> -->  <div id="app">{{msg}}</div>  <script src="./node_modules/vue/dist/vue.min.js"></script>   <script>      new Vue({          el: "#app",          data: {              msg: "你好"          }      })  </script><!-- </body></html> -->
文章目录