初建vue项目

1.​​​​创建项目：

1.1. 创建一个vue项目首先得要建一个项目脚手架

在输入命令行输入

vue create 自定义项目名字
————————————————

1.2. 自定义创建项目：

? Please pick a preset:
  //选择最后一个 Manually 手动配置
  normal ([Vue 2] router, vuex, less, babel, eslint)
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features 
————————————————

1.3.  手动选择特性

? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Choose Vue version
 (*) Babel           // 转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
 ( ) TypeScript      // TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 
                        JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行

 ( ) Progressive Web App (PWA) Support   // 渐进式Web应用程序
 (*) Router                              // vue-router（vue路由）
 (*) Vuex                                // vuex（vue的状态管理模式）
>(*) CSS Pre-processors                  // CSS 预处理器（如：less、sass）
 (*) Linter / Formatter                  // 代码风格检查和格式化（如：ESlint）
 ( ) Unit Testing                        // 单元测试（unit tests）
 ( ) E2E Testing                         // e2e（end to end） 测试
 
————————————————

1.4. 版本号

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
  3.x (Preview)
———————————————— 

1.5.  路由是否使用history模式

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

1.6.  css 预处理器

?Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  //选择CSS预处理的模式
( )Sass/SCSS (with dart-sass)
( )Sass/SCSS (with node-sass)
( )Less
( )Stylus
————————————————

1.7. 代码风格

Pick a linter / formatter config: (Use arrow keys)
 //选择语法检测规范
( )TSLint
( )ESLint with error prevention only
( )ESLint + Airbnb config
( )ESLint + Standard config
( )ESLint + Prettier
————————————————

1.7.2

Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
 //选择配置信息存放位置，单独存放或者并入package.json
( )In dedicated config files
( )In package.json
————————————————

检查节点：保存时检查，提交时检查

Pick additional lint features: (Press to select, to toggle all, to invert selection)

(*) Lint on save            // 保存时检查 
( ) Lint and fix on commit  // 提交时检查
————————————————

1.8. 存储插件配置位置

Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
  //选择配置信息存放位置，单独存放或者并入package.json
( )In dedicated config files
( )In package.json
————————————————

1.9.  否要保存前面的设置作为预设方案

Save this as a preset for future projects? (y/N) 
  //是否保存当前预设，下次构建无需再次配置

 2.认识工作目录：

├── node_modules      # 安装的包
├── public	          # 静态资源
│   ├── favicon.ico
│   └── index.html
└── src
    ├── api	          # 请求接口封装模块
    ├── assets	      # 资源目录
    ├── components	  # 组件目录
    ├── router	      # 路由模块
    ├── store	        # Vuex容器模块
    ├── styles        # 样式目录
    ├── utils         # 工具模块目录
    ├── views         # 视图组件目录
        └──home        # 首页模块
        |	    ├── home.vue
        ├─video       # 视频模块
        |	    ├── video.vue
        ├─question    # 问答模块
        |	    ├── question.vue
        ├─search      # 搜索模块
        |	    ├── search.vue
        ├─user        # 用户模块
        |     ├── user.vue
        └─Layout.vue  # 公用布局组件
    ├── App.vue	      # 根组件
    └── main.js	      # 入口文件
├── .browserslistrc   # 浏览器的约定
├── .editorconfig     # 对本项目要用到编辑器的约定
├── .eslintrc.js      # eslint 配置
├── .gitignore        # git的忽略设置，哪些文件不需要git托管
├── babel.config.js	  # babel配置文件
├── package-lock.json	# npm相关文件
├── package.json	    # npm相关文件
└── README.md	        # 项目说明文件

3.用REM解决多屏适配：

1. 把所有px单位改成rem ， 用postcss-pxtorem 插件来实现，用于将px转化为 rem。

   npm i postcss-pxtorem@版本号 -D

    

2. 根据不同的显示器屏幕的宽度，来动态设置rem的参考值：html标签上的font-size的大小。用lib-flexible 来实现，用于设置 rem 基准值 。

• 它对应的包名不是这个名字，而是amfe-flexible

 

 

• npm i amfe-flexible

   4. 设置postcss

• 根目录下创建postcss.config.js文件

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      // 能够把所有元素的px单位转成Rem
      // rootValue: 转换px的基准值。
     
      rootValue: 37.5,
      propList: ['*']
    }
  }

  5.引入flexible

•   在入口文件src/main.js导入 amfe-flexible

 

4.axios-封装工具 axios 请求:

• 为了调用ajax方便，这里我们先对 axios进行一次封装，把它封装成一个独立的模块，在需要的时候直接加载使用。

• 安装 axios

 

npm i axios

• 创建 src/utils/request.js ， 创建axios的实例，配置。

import axios from 'axios'

// 创建axios的实例，配置

// baseURL是关键字,必须使用baseURL
// 1. 基地址
const request1 = axios.create({
  baseURL: 'http://www.xxx.xx.xx'
})

export const request2 = axios.create({
  baseURL: 'http://www.xxx.xx.xx'
})

// 导出
export default request1

• 在app.vue组件中去发送请求。

 

• async-awati的用法

export default {

  methods: {
    async testAjax () {
      try {
        const res = await request({
          url: '', // 接口地址
          method: 'GET'
        })
        console.log('请求回来的数据', res)
      } catch (err) {
        console.log('本次请求的错误', err)
      }
    }
  }
}