黑马头条管理项目搭建

莫凡是莫烦
213 阅读7分钟

一、项目初始化

目标

  • 能使用 Vue CLI 创建项目
  • 了解 Vant 组件库的导入方式
  • 掌握制作使用字体图标的方式
  • 掌握如何在 Vue 项目中处理 REM 适配
  • 理解 axios 请求模块的封装

使用 Vue CLI 创建项目

如果你还没有安装 VueCLI，请执行下面的命令安装或是升级：

npm install --global @vue/cli

这里可通过 （cmd输入）

vue --version

如果出现类似图片效果则无需安装脚手架

image.png

在命令行中输入以下命令创建 Vue 项目：

vue create toutiao_admin

(回车后) image.png

default：默认勾选 babel、eslint，回车之后直接进入装包

manually：自定义勾选特性配置，选择完毕之后，才会进入装包

选择第 2 种：手动选择特性，支持更多自定义选项

(回车后) image.png

分别选择：（space选择，键盘中下的空格键）

  • Babel：es6 转 es5
  • Router：路由
  • Vuex：数据容器，存储共享数据
  • CSS Pre-processors：CSS 预处理器，后面会提示你选择 less、sass、stylus 等
  • Linter / Formatter：代码格式校验

image.png （由于项目是vue2 这里选第二个）

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n

是否使用 history 路由模式，这里输入 n 不使用

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
> Less
  Stylus

选择 CSS 预处理器，这里选择我们熟悉的 Less

? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
> ESLint + Standard config
  ESLint + Prettier

选择校验工具，这里选择 ESLint + Standard config

? Pick additional lint features:
 (*) Lint on save
>(*) Lint and fix on commit

选择在什么时机下触发代码格式校验：

  • Lint on save：每当保存文件的时候
  • Lint and fix on commit：每当执行 git commit 提交的时候

这里建议两个都选上，更严谨。

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

Babel、ESLint 等工具会有一些额外的配置文件，这里的意思是问你将这些工具相关的配置文件写到哪里：

  • In dedicated config files：分别保存到单独的配置文件
  • In package.json：保存到 package.json 文件中

这里建议选择第 1 个，保存到单独的配置文件，这样方便我们做自定义配置。

? Save this as a preset for future projects? (y/N) N

这里里是问你是否需要将刚才选择的一系列配置保存起来，然后它可以帮你记住上面的一系列选择，以便下次直接重用。

这里根据自己需要输入 y 或者 n，我这里输入 n 不需要。

✨  Creating project in C:\Users\LPZ\Desktop\topline-m-fe89\topline-m-89.
�  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...
​
[          ........] - extract:object-keys: sill extract json5@2.1.1

向导配置结束，开始装包。 安装包的时间可能较长，请耐心等待......

⚓  Running completion hooks...
​
�  Generating README.md...
​
�  Successfully created project topline-m-89.
�  Get started with the following commands:
​
 $ cd topline-m
 $ npm run serve

安装结束，命令提示你项目创建成功，按照命令行的提示在终端中分别输入：

# 进入你的项目目录
cd toutiao_admin
​
# 启动开发服务
npm run serve

或

yarn serve

创建成功后会有如下显示

 DONE  Compiled successfully in 7527ms
​
​
  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.10.216:8080/
​
  Note that the development build is not optimized.
  To create a production build, run npm run build.

启动成功，命令行中输出项目的 http 访问地址。 打开浏览器，输入其中任何一个地址进行访问。

如果能看到该页面，恭喜你，项目创建成功了。

加入 Git 版本管理

几个好处：

  • 代码备份
  • 多人协作
  • 历史记录
  • ...

（1）创建远程仓库（这里我用的是github,创建过程可以自行搜索，注意你要下载git才行）

（2）将本地仓库推到线上（右键：git bash here 打开git控制台）

image.png

如果没有本地仓库。（最好初始化一下，或者可以尝试下面的先操作下，如果你惊奇的发现你你的新仓库并不是刚才配置的项目，那么你需要按照你需要按这些指令去做）

# 创建本地仓库
git init
​
# 将文件添加到暂存区
git add 文件
​
# 提交历史记录
git commit "提交日志"
​
# 添加远端仓库地址
git remote add origin 你的远程仓库地址
​
# 推送提交
git push -u origin master

如果已有本地仓库（Vue CLI 已经帮我们初始化好了）。

# 添加远端仓库地址
git remote add origin 你的远程仓库地址
​

这里如果报错

image.png

fatal: remote origin already exists.

就是因为之前你有个仓库使用中，（代码提交到那里）

解决方法：(移除之前的默认仓库)

git remote rm origin

测试是否添加成功

 git remote -v

（出现这个就是成功了） image.png

推送提交

git push -u origin master

（将代码推送到这个默认仓库的master分支）

  • 完整写法 (指令的完整写法)

git push --set-upstream origin master

然后有这个 -u是保存这个设置（下次直接写git push就行）

image.png

这种报错，你需要再次输入上面的命令

如果出现下图这样的情况

image.png 这是提示密码失效，这时你要使用token解决

详情参见：blog.csdn.net/qq_41646249…

修改之后一般能成功，那么如果出现下面的提示，你就成功了

image.png

image.png

如果之后项目代码有了变动需要提交：

#查看更改的文件信息
git status 
添加文件到缓存区（会覆盖之前的项目文件）
git add .
# 提交历史记录和描述信息
git commit -m '描述信息'
# 推到git上
git push

调整初始目录结构

默认生成的目录结构不满足我们的开发需求，所以这里需要做一些自定义改动。

这里主要就是下面的两个工作：

  • 删除初始化的默认文件
  • 新增调整我们需要的目录结构

1、将 App.vue 修改为

<template>
  <div id="app">
    <h1>黑马头条</h1>
    <router-view />
  </div>
</template>
​
<script>
export default {
  name: 'App'
}
</script>
​
<style scoped lang="less"></style>
​

2、将 router/index.js 修改为

import Vue from 'vue'
import VueRouter from 'vue-router'
​
Vue.use(VueRouter)
​
const routes = [
]
​
const router = new VueRouter({
  routes
})
​
export default router
​

3、删除

  • src/views/About.vue
  • src/views/Home.vue
  • src/components/HelloWorld.vue
  • src/assets/logo.png

4、创建以下几个目录

  • src/api 目录

    • 存储接口封装

  • src/utils 目录

    • 存储一些工具模块

  • src/styles 目录

    • index.less 文件，存储全局样式
    • 在 main.js 中加载全局样式 import './styles/index.less'

调整之后的目录结构如下。

.                                 
├── README.md                     
├── babel.config.js               
├── package-lock.json             
├── package.json                  
├── public                        
│   ├── favicon.ico               
│   └── index.html                
└── src                           
    ├── api
    ├── App.vue                   
    ├── assets                    
    ├── components                
    ├── main.js                   
    ├── router
    ├── utils
    ├── styles
    ├── store                     
    └── views

这时如果报错：（这个最好不要改，因为这是代码不规范引起的，禁用vs格式化插件即可 image.png）

Expected indentation of 2 spaces but found 4

就在.eslint-parser的rules加上（'indent':0）

image.png

ElementUI引入

官网地址

（1）安装

  • npm 安装
npm i element-ui -S
  • yarn 安装
yarn add element-ui -s

(2)完整引入：（main.js）

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; 
import App from './App.vue';
Vue.use(ElementUI);
new Vue({ el: '#app', render: h => h(App) });

封装请求模块

和之前项目一样，这里我们还是使用 axios 作为我们项目中的请求库，为了方便使用，我们把它封装为一个请求模块，在需要的时候直接加载即可。

1、安装 axios

npm i axios

或者

yarn add axios

2、创建 src/utils/request.js

/**
 * 封装 axios 请求模块
 */
import axios from "axios"
​
const request = axios.create({
  baseURL: 'http://api-toutiao-web.itheima.net' // 基础路径
})
​
export default request

3、如何使用

  • 方式一（简单方便，但是不利于接口维护）：我们可以把请求对象挂载到 Vue.prototype 原型对象中，然后在组件中通过 this.xxx 直接访问
  • 方式二（推荐）：我们把每一个请求都封装成每个独立的功能函数，在需要的时候加载调用，这种做法更便于接口的管理和维护

在我们的项目中建议使用方式二，更推荐（在随后的业务功能中我们就能学到）。

补充

项目前置条件：

node -version

npm -version

  • 安装yarn：npm install -g yarn
  • yarn serve不成功就重新安装cnpm install
avatar
文章
阅读
粉丝