vue项目学习笔记1

前言

最近在学习vue，记录一下自己的学习过程，希望能帮助到后来者。
我很烦恼每次的底部栏都要重新搞一套图标啊还有重新写布局之类的,既然有vue组件化的功能我想直接做一个完成品的组件,直接可以拿来使用

在github上创建仓库

首先需要在github上创建一个仓库，然后克隆到本地

git clone <仓库地址>

创建dev分支

git branch dev

切换到dev分支

git checkout dev

初始化项目

项目名称要和仓库名称一致,并且在同一个根目录下

npm create <项目名称>

项目是vue-cli创建的，我的电脑因为是重置过,一开始没有安装Vue-cli，所以需要先全局安装Vue-cli

全局安装Vue-cli

Npm install -g @vue/cli

安装完vue-cli之后，按照上面的初始化代码,安装项目文件,注意,全局安装Cli是在电脑的CMD里面安装的,但是项目目录要到你的硬盘下进行初始化,比如我在f盘的目录下创建项目,那么命令应该是:

cd f:/
vue create <项目名称>

项目目录结构

├── README.md
├── babel.config.js
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.vue
│   ├── assets
│   ├── components
│   ├── main.js
│   ├── router
│   ├── styles
│   └── views
        ├── Home.vue // 首页
        ├── category.vue // 分类页
        ├── User.vue // 用户页
        └── Cart.vue    // 购物车页
└── vue.config.js

我这里的项目结构更改了views下的部分,这个是即将要用的,我会在下个文章介绍更改项目结构的步骤

后端初始化

  1. 全局安装 express
    npm install express --save
    2.进入项目目录,创建server.js文件
    express --view=ejs <后端文件名称>

  2. 安装依赖

    npm install

  3. 启动项目
    项目启动命令如果不知道可以去server>package.json里查看

    "scripts": {
        "start": "nodemon server.js"
      },
    npm start
  4. 查看项目是否启动成功
    http://localhost:3000/
    出现以下图片代表后端启动成功了
    这个图片