vue第13天：使用Vue脚手架搭建项目、项目介绍、产品开发流程、创建项目、使用Git管理项目、创建login组件-配置路由、项目基础：公共样式处理、在线图标库、rem插件配置、目录别名的配置

vue 脚手架

使用脚手架搭建项目

1. 全局安装

   yarn global add @vue/cli       如果装不上 => 用 npm i @vue/cli -g
   
   vue -V  查看版本
   

   创建项目

   vue create 项目名
   
   先cd到项目目录, 再启动:
   yarn serve   /   npm run serve
   

此 Linter 可以不选，不然到后面会显示语法报错

若真选了这个，解决方案：src - main.js 的首行写上下面这行注释就可以了

/* eslint-disable */

脚手架中配置webpack

新建 vue.config.js 自动启动浏览器, 配置了端口号

vue.config.js 中配置的内容, 会覆盖默认 vue-cli 的webpack配置

module.exports = {
     
  devServer: {
     
    open: true,
    port: 3000
  }
}

vue-cli - 基本结构分析

基本目录结构分析

基于 vue-cli - 代码规范校验的说明

如果公司没有明确规定规范, 那么脚手架初始化创建项目时, 就可以不勾上 lint

删除目录文件, src 中删除只剩 App.vue 和 main.js

eslint: 进行代码格式的校验, 如果代码不符合规范, 直接报错
1. 不能有多余的换行, 最多一行
2. 不能有声明, 但是不使用的变量
3. 导入, 必须放在顶部
4. 分号规范, 定义好了必须遵守 (无分号)
...

eslint 配置

安装vscode的prettier插件

• 配置 => 搜索 format 将 formatOnSave 勾上

// 当保存的时候使用prettier进行格式化
"editor.formatOnSave": true,

• 在项目的根目录创建prettier的配置文件 .prettierrc

{
     
  "semi": false,
  "singleQuote": true
}

prettier和eslint冲突

函数前面是否添加空格的问题

修改eslint的规则(在package.json里面更改)

"rules": {
     
  "semi": ["error", "never"],
  "space-before-function-paren": ["error", "never"]
}

安装项目的问题

文件位置

sass 语法的简单介绍

1. sass 比较简洁, 必须省略 {} 和 ;
2. scss 和 less 语法相似, 也支持嵌套, 变量($)

在项目中使用 sass

yarn add sass-loader node-sass -D

在项目中使用less

yarn add less less-loader -D

项目介绍

搜索极简插件官网

https://chrome.zzzmh.cn/#index

• 搜索 Axure RP(chrome的插件)
  
• 点击下载并安装
  
• 安装方法说明：
  https://chrome.zzzmh.cn/help?token=setup

原型图的说明

安装 Axure RP(chrome的插件) 可以打开原型图

1. 在chrome商店, 搜索 Axure RP 安装

2. 重新开启浏览器

3. 点开管理扩展程序

4.勾上允许访问文件地址

产品开发流程

• 售前工程师或者老板： 确定项目

• 产品经理进行产品设计：出需求文档，原型图

• 需求评审会 (尽可能避免需求变更)

• UI根据原型图出设计稿

• 前端根据设计稿出静态页面

• 后端写接口，出接口文档

• 前后端接口联调（postman swagger）

• 测试（功能性测试，自动化测试）

• 运维 (项目上线的服务器维护)

• 售后

接口已经有了
测试我们自己做
原型图已经准备好了
原型图充当设计稿

后台接口启动与介绍

• 安装包依赖 - 这个后台代码依赖的一些包必须通过 npm 下载, 不然会报错 !!!

  (node后端的一些代码包资源的问题)

  如果实在安装不上, 启动不了, 可以安装和我一样的node版本, 直接用安装好依赖的即可

npm i

• 启动后台接口代码

yarn start   或者   npm  start

• 启动成功界面

• 测试服务器是否成功

http://localhost:3000/post/1

• 服务器端已经开启了 CORS 跨域
• sqlitebrowser的使用
• 接口文档

创建项目

• 初始化项目

vue create hm-news-67

• 新增vue.config.js

  注意: 后台接口启动在3000端口, 所以我们的项目就用默认的 8080 即可

module.exports = {
     
  devServer: {
     
    open: true
  }
}

• 修改默认的内容,只保留App.vue和main.js

使用git管理项目

1. 使用脚手架初始化的项目不需要git init, 初始化项目的时候，已经git init 过了

   提交代码

   git add .
   git commit -m '初始化项目'
   

2. 在 github 上 或者 码云上, 创建仓库 (空仓库)

   ---

   码云的仓库创建

3. 推送代码

   创建仓库别名 origin
   git remote add origin [email protected]:jepsonpp/hm-news-57.git
   
   推送远程仓库
   git push -u origin master        作用: 可以在提交同时, 和远程仓库分支关联起来, (将来作为默认值提交)
   
   只要之前 -u 过了
   后面只需要 git push 即可
   

创建 login组件 - 配置路由

开始写登录 - 在src文件夹下创建 router文件夹 - 在router文件夹下创建index.js - 配置 login组件, register组件 路由

注意：

解决方案：

如果还是出现报错：

项目基础

公共样式处理

引入提供的base.css, 在main.js中引入

在线图标库

• 地址: http://at.alicdn.com/t/font_1426139_h6vn3jbl5q.css

• 使用方式, 给标签 class 添加 iconfont 和下面显示的图标名,

  如

rem 布局 - 插件 postcss-pxtorem的配置

https://www.cnblogs.com/lml2017/p/9953429.html

1. 安装插件

   yarn add lib-flexible postcss-px2rem
   

2. 在 public 中的 index.html 中删除 meta 标签 (viewport)

   flexible会为页面根据屏幕自动添加标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值。

3. 在 src / main.js 中导入插件包

   // 导入 rem 的 js, 动态的设置了, 不同屏幕的html根元素的 font-size
   import 'lib-flexible'
   

4. 配置 vue.config.js

   是在将编写 px 单位, 转换成 rem

   module.exports = {
          
     devServer: {
          
       open: true
     },
     // rem 的配置
     css: {
          
       loaderOptions: {
          
         css: {
          },
         postcss: {
          
           plugins: [
             require('postcss-px2rem')({
          
               // 适配 360 屏幕, 设计图720中量出来的尺寸要 / 2
               // 适配 375 屏幕, 设计图750中量出来的尺寸要 / 2
               remUnit: 36
             })
           ]
         }
       }
     }
   }
   

目录别名的配置

导入组件路径麻烦, 可以配置别名 https://www.cnblogs.com/zhouyingying/p/11382157.html

配置路径别名，方便引用，不用写那么长

配置前:

import Test from '../../../components/Test.vue'

配置后(不用再关心文件层级关系):

// 表示直接从 components 目录开始找
import Test from 'components/Test.vue'

// @ 表示从 src 目录触发开始找
import Test from '@/components/Test.vue'

配置 vue.config.js

const path = require('path')// 引入path模块
function resolve (dir) {
     
  return path.join(__dirname, dir)// path.join(__dirname)设置绝对路径
}


module.exports={
     
  // 别名的配置
  chainWebpack: (config) => {
     
    config.resolve.alias
      .set('@', resolve('./src'))
      .set('components', resolve('./src/components'))
      .set('pages', resolve('./src/pages'))
      .set('assets', resolve('./src/assets'))
    // set第一个参数：设置的别名，第二个参数：设置的路径
  }
}

小注意点:

template结构中的文件地址和style中的文件地址, 如果想用目录别名, 需要加 ~ 前缀, 而 js 中不需要

<template>
  <div>
    <img src="~assets/banner01.jpg" alt="">
  div>
template>

<style>
  h3 {
      
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: url('~assets/bg.jpg');
  }
style>