VUE 创建项目流程

安装 vue3

• yarn 需要电脑有安装，https://www.jianshu.com/p/1f920de5f941

1、安装 vue-cli 脚手架，全局安装

• yarn: yarn global add @vue/cli
• npm: npm install -g @vue/cli

卸载

• yarn: yarn global remove @vue/cli
• npm: npm uninstall vue-cli -g

2、一次性安装 3 个 vue-cli 服务

• yarn: yarn global add @vue/cli @vue/cli-service-global @vue/cli-service
• npm: npm install -g @vue/cli @vue/cli-service-global @vue/cli-service

如果安装失败，可能是没有权限，macbook 命令行前加 sudo

创建项目

# 1、创建一个项目
vue create vuecli, vuecli-项目名称
# 2、选择：用vue2，vue3，手动配置。 vue2，vue3除了基本语法， 还有下面2个功能
# 2.1、babel 把es6的语法，转成es5的语法，可以做到兼容
# 2.2、eslint 语法检查，约束你的代码习惯
# 第一次一般选择手动选择
please pick a preset：
  Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
  Manually select features
# 3、手动选择功能：Choose Vue version、Babel、CSS Pre-processors
Check the features needed for your project:
  Choose Vue version                  // （*）版本
  Babel                               // （*）把es6的语法，转成es5的语法，可以做到兼容
  TypeScript                          // 由微软开发的自由和开源的编程语言，是 JavaScript 的一个超集，支持es6语法
  Progressive Web App (PWA) Support   // Web APP开发
  Router                              // （*）路由
  Vuex                                // （*）状态管理器
  CSS Pre-processors                  // css预处理器：三种流行的CSS预处理器：Sass、LESS 和 Stylus
  Linter / Formatter                  // 语法检查器(eslint)
  Unit Testing                        // 单元测试
  E2E Testing                         // e2e(端到端)测试
  // Mac电脑
  ◉ Babel
  ◯ TypeScript
  ◯ Progressive Web App (PWA) Support
  ◉ Router
  ◉ Vuex
  ◉ CSS Pre-processors
  ◯ Linter / Formatter
  ◯ Unit Testing
  ◯ E2E Testing
# 4、选择版本：3.x
Choose a version of Vue.js that you want to start the project with:
  2.x
  3.x // （*）
# 5、选择css预处理器版本：dart-sass，官方目前主力推dart-sass
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
- Mac
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) // Y
# 6、配置文件：In package.json
Where do you prefer placing config for Babel, ESlint, etc.?
  In dedicated config files   // 独立配置文件
  In package.json             // （*）放在package.json里
# 7、是否保持此项目配置：保存的话，起个名字，后续直接安装这个
Save this as a preset for future projects?
  y   // 保存
  n   // 不保存

运行项目

• yarn: yarn serve
• npm: npm run serve

安装常用插件

• 安装 ant D: 需要安装.3版本

# 1、npm安装
npm i --save ant-design-vue@next
# 2、yarn安装
yarn add ant-design-vue@next
yarn add ant-design-vue@3.2.2

• 添加 axios: yarn add axios

配置接口

• src 目录下新建network文件夹
• network 文件夹新建request.js文件, 做接口统一处理

import axios from "axios";
export function request(config){
    const instance =  axios.create({
        baseURL : "https://help10086.io/admin/",
        timeout : 5000,
    })
    // 请求拦截
    instance.interceptors.request.use(
        (config) => {
            return config
        },
        (err) => {
            console.log(err);
        }
    );
    // 响应拦截
    instance.interceptors.response.use(
        (res) => {
            return res.data;
        },
        (err) => {
            console.log(err);
        }
    );
    return instance(config);
}

• 接口文件中引入request

import { request } from "./request.js";
export function users_li(data={}){
    return request( {
        url : "users_li",
        method : "post",
        data
    })
}

项目打包: yarn build

项目上线

• 打包好的dist文件夹上传到网站
• 需要配置网站 php 伪静态文件

<IfModule mod_rewrite.c>
  Options +FollowSymlinks -Multiviews
  RewriteEngine On
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteRule ^(.*)$ index.html [L,E=PATH_INFO:$1]
</IfModule>