1. Установка
[1.1] Установить узел
3.x требуется node.js версии 8.9 или выше, нажмите здесь, чтобы установитьnode
После установки узла введите следующую командную строку, чтобы запросить версию узла:
node -vЕсли текущей версии недостаточно, вы можете ввести следующую командную строку, чтобы обновить версию узла до последней стабильной версии.
先清除npm缓存：npm cache clean -f
然后安装n模块：npm install -g n
升级node.js到最新稳定版：n stable
如果是mac 在命令前面加sudo：sudo n stable
[1.2] Удалить старую версию
Если вы ранее устанавливали старую версию vue-cli глобально, вам необходимо сначала удалить ее.
npm uninstall vue-cli -g[1.3] Установите vue-cli3
// 安装vue-cli3
npm install -g @vue/cli
// 安装后查看版本号
vue -V 或者 vue --version
2. Создайте проект
[2.1] Команда создания проекта
vue create project // project是项目名称【2.2】Выберите шаблон
- default (babel, eslint): Конфигурация по умолчанию, только Babel и eslint, остальные настраиваются отдельно
- Manually select features: Ручная настройка
Опции можно переключать стрелками вверх и вниз, здесь мы выбираем ручную настройку
【2.3】Выберите конфигурацию
Выберите конфигурацию в соответствии с потребностями вашего проекта
- * в скобках означает выбранный
- Стрелки вверх и вниз для переключения параметров
- Пробел для переключения выбора и отмены
- Ключ должен переключить все выбранные и все отмененные
- Ключ I - обратный выбор
- Введите, чтобы подтвердить выбор.
Выбрано здесь (Babel, Router, Vuex, препроцессор CSS, проверка формата Linter/Formatter)
Спросите еще раз, сохранять ли конфигурацию:
1) Использовать ли исторический режим маршрутизации (Да)
2) Выберите препроцессор css (Sass/SCSS)
3) Выбираем конфиг eslint (ESLint + Стандартный конфиг)
4) Выберите, когда выполнить проверку правила кода ESLINT (LINT на сохранении)
5) Где разместить файлы конфигурации babel, postcss, eslint (в специальных файлах конфигурации)
6) Сохранять ли эту предустановленную конфигурацию (Да)
Если вы выберете «да», вам будет предложено указать имя файла пресета.В следующий раз, когда вы будете создавать проект vue, вы сможете использовать этот файл пресета напрямую без дополнительной настройки.
[2.4] Создание структуры каталогов
- узлы_модули:Эта папка содержит некоторые зависимости, которые нужны нашему проекту;
- публичный:Статическая папка, ресурсы в этой папке не будут компилироваться вебпаком, а будут скопированы непосредственно при сборке производственного пакета;
- ресурсы:статические ресурсы, используемые на страницах и компонентах, такие как общедоступные файлы стилей, файлы шрифтов, изображения и т. д. Разница между этой папкой и общедоступной заключается в следующем: ресурсы в этой папке будут скомпилированы веб-пакетом;
- компоненты:Папка для хранения наших компонентов;
- Просмотры:Папки для хранения наших страниц;
- App.vue:Этот файл является файлом верхнего уровня для всех наших страниц vue;
- основной.js:это входной файл всего нашего проекта;
- роутер.js:файл конфигурации маршрутизации;
- store.js:файл конфигурации vuex;
- .browserslistrc:Файл используется для установки диапазона версий браузера для разработчиков;
- .eslintrc.js:конфигурационный файл eslint;
- .gitignore:файлы, которые нужно игнорировать git;
- Бабель.config.js:инструмент настройки Babel;
- package-lock.json: запишите взаимосвязь и версию между зависимостями в зависимостях проекта, чтобы предотвратить несоответствие пакетов npm «одному и тому же пакету библиотеки с тем же основным номером версии, его интерфейс соответствует требованиям совместимости».
- Эта спецификация вызывает ошибку запуска проекта;
- пакет.json:Файл описания проекта, включая имя проекта, зависимую версию, автора, команду, файл входа и другую информацию.
- ридми.Документация проекта, введение проекта, лицензия, некоторые команды (например: команда запуска, команда упаковки, команда модульного тестирования и т. д.)
Разница между vue-cli3 и vue-cli2 заключается в следующем:
- создать проект vue создать
- Запустите проект с npm run dev на npm run serve
- Каталог файла конфигурации config и папки сборки были удалены.Если вам нужно настроить конфигурацию, вам нужно создать новый файл vue.config.js самостоятельно.
- Удалена папка статических ресурсов, добавлена общая папка, перемещены статические ресурсы в общедоступный каталог, доступ к ним осуществляется напрямую через /xx.xx, а index.html перемещен в общедоступный
- Добавлена папка представлений в папку src для классификации компонентов представления и общедоступных компонентов.
- Папка node-model автоматически загружается при установке проекта.
【2.5】Начать проект
npm run serve3. Измените структуру каталогов
Поскольку текущая структура каталогов не способствует дальнейшему развитию, теперь мы добавляем несколько файлов, а расширение функций можно выполнить позже. В файле src: создайте новую папку API, папку маршрутизатора, папку утилит, папку представлений, папку хранилища. И создайте подкаталог в его файле, пожалуйста, обратитесь к скриншоту каталога для деталей:
В-четвертых, конфигурация проекта Vue.config.js
В каталоге проекта сборки vue-cli3.0 нет каталога сборки и конфигурации, поэтому вопрос в том, как нам развивать наш проект? (Например, настройка прокси, конфигурация упаковки и т. д.) Просто добавьте файл vue.config.js в корневой каталог проекта.Обратите внимание, что корневой каталог не находится в src, он будет автоматически загружен @vue/cli-service . Ссылаться наVue CLI
Конфигурация выглядит следующим образом:
// vue.config.js
const path = require('path');
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
// 部署应用包时的基本URL，默认为'/'
// 假设你的应用将会部署在域名的根部,比如，https://www.vue-cli.com/,则设置为"/"
// 如果你的应用是部署在一个子路径下，那么你需要在这里指定子路径，比如，如果你部署在 https://www.my-vue.com/my-app/; 那么将这个值改为 “/my-app/”
publicPath: "/",
//将构建好的文件输出到哪里 当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。
outputDir: "dist",
//放置生成的静态资源(js、css、img、fonts)的目录。
assetsDir: "",
// 指定生成的 index.html 的输出路径
indexPath: "index.html",
// 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。然而，这也要求 index 的 HTML 是被 Vue CLI 自动生成的。如果你无法使用 Vue CLI 生成的 index HTML，你可以通过将这个选项设为 false 来关闭文件名哈希
filenameHashing: true,
// 构建多页面应用，页面的配置
pages: {
index: {
// page 的入口
entry: 'src/main.js',
// 模板来源
template: 'public/index.html',
// 在 dist/index.html 的输出
filename: 'index.html',
// 当使用 title 选项时，
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: 'Index Page',
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
// 当使用只有入口的字符串格式时，
// 模板会被推导为 `public/subpage.html`
// 并且如果找不到的话，就回退到 `public/index.html`。
// 输出文件名会被推导为 `subpage.html`。
// subpage: 'src/subpage/main.js'
},
// 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。这个值会在 @vue/cli-plugin-eslint 被安装之后生效。
// 设置为 true 时，eslint-loader 会将 lint 错误输出为编译警告。默认情况下，警告仅仅会被输出到命令行，且不会使得编译失败。
// 如果你希望让 lint 错误在开发时直接显示在浏览器中，你可以使用 lintOnSave: 'error'。这会强制 eslint-loader 将 lint 错误输出为编译错误，同时也意味着 lint 错误将会导致编译失败。
lintOnSave: false,
//是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右。
runtimeCompiler: false,
// 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来。
transpileDependencies: [],
//如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
productionSourceMap: true,
//是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
chainWebpack: (config) => {
//配置别名
config.resolve.alias
.set('@', resolve('src'))
.set('assets', resolve('src/assets'))
.set('components', resolve('src/components'))
.set('router', resolve('src/router'))
.set('utils', resolve('src/utils'))
.set('store', resolve('src/store'))
.set('views', resolve('src/views'))
},
//是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
parallel: require("os").cpus().length > 1,
// 向 PWA 插件传递选项。
// https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},
// 所有 webpack-dev-server 的选项都支持。注意：有些值像 host、port 和 https 可能会被命令行参数覆写。
//有些值像 publicPath 和 historyApiFallback 不应该被修改，因为它们需要和开发服务器的 publicPath 同步以保障正常的工作。
// 代理配置
devServer: {
host: "0.0.0.0",
port: 8080, // 端口号
https: false, // https:{type:Boolean}
open: true, // 配置自动启动浏览器 open: 'Google Chrome'-默认启动谷歌
// 配置单个代理
// proxy: 'http://localhost:9000'
// 配置多个代理
proxy: {
"/api": {
// target: "https://127.0.0.0:8080", // 目标主机
target: "https://mock.yonyoucloud.com/mock/5708",
ws: true, //代理的WebSockets
changeOrigin: true, // 允许websockets跨域
pathRewrite: {
"^/api": ""
}
}
}
},
// 第三方插件选项
// 这是一个不进行任何 schema 验证的对象，因此它可以用来传递任何第三方插件选项。
pluginOptions: {
foo: {
// 插件可以作为 `options.pluginOptions.foo` 访问这些选项。
}
},
// 有的时候你想要向 webpack 的预处理器 loader 传递选项。你可以使用 vue.config.js 中的 css.loaderOptions 选项。比如你可以这样向所有 Sass/Less 样式传入共享的全局变量
css: {
loaderOptions: {
// 给 sass-loader 传递选项
sass: {
prependData: `
@import "@/assets/css/common.scss";
@import "@/assets/css/mixin.scss";
@import "@/assets/css/reset.scss";
@import "@/assets/css/var.scss";
`
}
}
},
};5. Глобальные ссылки на стили
В процессе разработки проекта нам часто нужны глобальные референсы стилей, такие как цвета темы и т.д. Писать их каждый раз будет очень хлопотно. Поскольку мы должны предварительно скомпилировать sass, мы можем смело применять его возможности. Например, переменные, функции, примеси и т. д. Но нам нужно сделать глобальную настройку в проекте, чтобы быть эффективным. Вы можете ссылаться напрямую, не импортируя стили на каждой странице.
[5.1] Создать новый каталог
Добавьте папку css в файл ресурсов, создайте следующие файлы кода стиля в папке css и настройте конкретный код самостоятельно.
common.scss 主要存放公共的样式
mixin.scss 主要存放混入样式
reset.scss 主要存放重置样式。
var.scss 主要存放变量
[5.2] Общее введение
В файле конфигурации vue.config.js добавьте следующий код
module.exports = {
css: {
loaderOptions: {
// 给 sass-loader 传递选项
sass: {
prependData: `
@import "@/assets/css/common.scss";
@import "@/assets/css/mixin.scss";
@import "@/assets/css/reset.scss";
@import "@/assets/css/var.scss";
`
}
}
},
}Шесть, конфигурация упаковки
При разработке реального проекта мы обычно проходим стадию разработки, стадию тестирования, стадию предварительного выпуска и стадию финального запуска проекта.Требования к коду проекта на каждой стадии могут быть разными, так как мы можем это сделать легко на разных этапах?Как насчет того, чтобы наш проект выглядел по-разному и использовал разные функции? Здесь необходимо ввести понятие среды. Как разработчику, нам может понадобиться написать различный код для каждой среды и убедиться, что код работает в правильной среде, что требует от нас правильной настройки среды и управления ею.
Как правило, проект будет иметь следующие четыре среды:
- Среда разработки (этап разработки, локальная версия разработки, обычно используются какие-то средства отладки или дополнительные вспомогательные функции)
- Тестовая среда (стадия тестирования, предстартовая версия, за исключением некоторых исправлений ошибок, в принципе не сильно отличается от онлайн-версии)
- Предрелизная среда (скоро, предстартовая версия, прогнозирование возможности проблем онлайн, ничем не отличается от онлайн-версии)
- Рабочая среда (этап онлайн, официально выпущенная версия в целом будет оптимизирована, а отчеты об ошибках будут отключены)
Примечание о переменных среды:
- Файлы окружения помещаются в корневой каталог
- Имя среды должно соответствовать файлу среды.
- За исключением baseUrl и NODE_ENV, другие переменные среды начинаются с VUE_APP.
Создайте четыре новых папками в корневом каталоге проекта, соответствующего среде разработки (.env.dev), тестовой среды (.env.test), предупреждающей среды (.env.pre) и производственной среды (Env.Prod)
Содержимое файла .env.dev следующее:
NODE_ENV = 'development'
VUE_APP_CURRENTMODE = 'dev'
VUE_APP_BASEURL = '本地开发api地址'Содержимое файла .env.test следующее:
NODE_ENV = 'test'
VUE_APP_CURRENTMODE = 'test'
VUE_APP_BASEURL = '测试环境api地址'Содержимое файла .env.pre следующее:
NODE_ENV = 'pre-release'
VUE_APP_CURRENTMODE = 'pre'
VUE_APP_BASEURL = '预发布环境api地址'Содержимое файла env.prod следующее:
NODE_ENV = 'production'
VUE_APP_CURRENTMODE = 'prod'
VUE_APP_BASEURL = '正式环境api地址'Конфигурация package.json:
"scripts": {
"dev": "vue-cli-service serve",
"build:test": "vue-cli-service build --mode test",
"build:per": "vue-cli-service build --mode pre-release",
"build:prod": "vue-cli-service build --mode production",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},Наконец, упакуйте его в соответствии с приведенной выше конфигурацией:
- npm run dev // запустить локально
- npm run build:test //Тестовая упаковка среды
- npm run build:pre // Упаковка среды перед тестированием
- npm run build:prod // Официальная упаковка среды
Уведомление:
Используйте proccess.env.NODE_ENV в vue.config.js для доступа к нему.
// vue.config.js
console.log(process.env.NODE_ENV); // development（在终端输出）Когда вы запустите команду npm run dev, вы обнаружите, что вывод — это разработка, потому что среда по умолчанию для команды vue-cli-service serve — это разработка.Вы можете изменить сценарий dev в package.json Команда:
"scripts": {
"dev": "vue-cli-service serve --mode test",
}
// --mode test其实就是修改了 webpack 4 中的 mode 配置项为 test，同时其会读取对应 .env.[model]文件下的配置
// 如果没找到对应配置文件，其会使用默认环境 development
// 同样 vue-cli-service build 会使用默认环境 productionСемь, установите и используйте iview
[7.1] Установить iview
npm install iview -S[7.2] main.js представляет iview
import iview from 'iview'
import 'iview/dist/styles/iview.css'
Vue.use(iview)
Восемь, пакет axios
В проекте vue мы обычно используем библиотеку axios для взаимодействия с фоном для получения данных, которая представляет собой http-библиотеку на основе обещаний, которая может работать на стороне браузера и node.js. Он имеет множество отличных функций, таких как перехват запросов и ответов, отмена запросов, преобразование json, защита на стороне клиента от XSRF и т. д. Поэтому наша Youda тоже решительно отказалась от обслуживания своей официальной библиотеки vue-resource, и прямо порекомендовала нам использовать библиотеку axios. Если вы все еще не знаете об аксиомах, вы можете перейтиаксиос китайское описание
【8.1】Установка
npm install axios --save-dev【8.2】Создать новый каталог
Создайте новую папку api в каталоге src, а затем создайте в ней новый файл axios.js и файл getData.js; файл axios.js используется для инкапсуляции наших axios, а getData.js используется для унифицированного управления нашими интерфейсами. .
[8.3] axios.js инкапсулирует axios
import axios from "axios";
import { Message } from "iview";
let router = import("@/router");
axios.defaults.baseURL = "/api";
axios.defaults.headers.post["Content-Type"] = "application/json;charset=UTF-8";
axios.defaults.headers["X-Requested-With"] = "XMLHttpRequest";
axios.defaults.headers["Cache-Control"] = "no-cache";
axios.defaults.headers["pragma"] = "no-cache";
let source = axios.CancelToken.source();
//请求添加token
axios.interceptors.request.use(request => {
request.headers["Authorization"] = window.localStorage.getItem('token') ? window.localStorage.getItem('token') : "";
return request;
});
//登录过期(token失效)跳转到登录页
axios.interceptors.response.use(response => {
let data = response.data;
if (
data.state && [401].includes(data.state.code)
) {
router.then(lib => {
if (lib.default.currentRoute.name === "login") return;
lib.default.push({
name: "login"
})
Message.warning(data.state.msg);
});
}
return response;
})
//返回值解构
axios.interceptors.response.use(response => {
let data = response.data;
let isJson = (response.headers["content-type"] || "").includes("json");
if (isJson) {
if (data.state && data.state.code === 200) {
return Promise.resolve({
data: data.data,
msg: data.state.msg,
code: data.state.code,
page: data.page
});
}
return Promise.reject(
data.state &&
data.state.msg ||
"网络错误"
);
} else {
return data;
}
}, err => {
let isCancel = axios.isCancel(err);
if (isCancel) {
return new Promise(() => {});
}
return Promise.reject(
err.response.data &&
err.response.data.state &&
err.response.data.state.msg ||
"网络错误"
);
})
//切换页面取消请求
axios.interceptors.request.use(request => {
request.cancelToken = source.token;
return request;
});
router.then(lib => {
lib.default.beforeEach((to, from, next) => {
source.cancel()
source = axios.CancelToken.source();
next()
})
})
export function post(url, data, otherConfig) {
return axios.post(url, data, otherConfig);
}
export function get(url, data, otherConfig) {
return axios.get(url, {
params: data,
...otherConfig
});
}
[8.4] Управление интерфейсом getData.js (пример)
import {get, post } from "./axios";
//获取程序配置
export function getConfig() {
return get("static/config.json", null, { baseURL: "./" });
}
//获取用户信息（统一认证登录的用户）
export function getLoginInfo() {
return get("/oauth/getLoginInfo");
}
//登录
export function login(params) {
return post("/oauth/login", params);
}
//退出
export function logout(params) {
return get("/oauth/logout", params);
}[8.5] Интерфейс вызова страницы (пример)
import { login } from "@/api/getData.js";
export default {
data() {
return {
userName: '',
password: ''
};
},
methods: {
async login() {
try {
this.loading = true;
let { msg } = await login({
userName: this.userName,
userPwd: this.password
});
this.$Message.success(msg);
this.$router.push({ name: "loginPage" });
} catch (e) {
this.$Message.warning(e);
} finally {
this.loading = false;
}
},
}
};9. Перехват входа в систему (контроль полномочий)
Vue+router+axios реализует перехват входа в систему фонового управления (контроль полномочий)
10. Адрес проекта на GitHub
Статья постоянно обновляется каждую неделю, вы можете искать в WeChat "Особенности интерфейса"Прочтите это в первый раз, ответьте [видео】【книги】 Получите 200 ГБ видеоматериалов и 30 книг в формате PDF.