シリーズ記事の目次
这里是创建移动端项目
[Vue] Vue2 . プロジェクトの作成を完全解説
(後編)
[Vue] Vue2 でモバイル プロジェクトを作成する実践的なチュートリアル、モバイル プロジェクトの作成、axios、utils ツールキット、vue.fonfig のセットアップに関するナニーレベルのチュートリアル。 jsの設定項目（その２）
提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档
記事ディレクトリ
序文
最初の 2 つの記事をお読みください上。中最初の記事はプロジェクトの作成について、真ん中の記事はモバイル端末への適応について、次の記事はコンポーネントと構成オプションの紹介についてです。
1.vant2をインストールする
Portal Vant は軽量で信頼性の高いモバイル Vue コンポーネント ライブラリです
1. ライブラリをインポートする
ここでの私のプロジェクトは vue2 です。プロジェクトが vue3 の場合は、vue2 についてすでに知っていることを意味します。これは参照のみを目的とした vue2 チュートリアルです。
# Vue 3 项目，安装最新版 Vant：
npm i vant -S
# Vue 2 项目，安装 Vant 2：
npm i vant@latest-v2 -S
2.コンポーネントの紹介
オンデマンドインポートと手動インポートについてはvantの公式の書き方を参照してください。
すべてインポートし、main.jsファイルを開きます
// 引入vantUI
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
プロジェクトを実行します npm runserve
3. コンポーネントと適合性を確認する
ビューの下の Home.vue ページを次のコードに変更します。
<template>
<div class="home">
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
</div>
</template>
<script>
// @ is an alias to /src
export default {
name: 'Home',
components: {
}
}
</script>
効果は図の通りです
モバイルアダプテーションはありますが、h2などのタグにpxサイズを与えないと必ずしも変換されるわけではないようで、PCサイズのままになってしまいます。
2. スタイルを設定する
1.app.vueのデフォルトスタイルをクリア
src/App.vue を開き、内部のデフォルトのスタイルを削除し、
最後に次のコードを保持します。
<template>
<router-view />
</template>
2. 新しいグローバル スタイルを作成する
在src目录下新建styles文件夹、フォルダー内に新しいbase.cssを作成します。コードは次のとおりです。
body,ul{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
h1,h2,h3,h4,h5,p,span{
margin: 0;
/* font-family: 'PingFang SC'; */
font-family: PingFang SC-Heavy, PingFang SC;
}
a{
text-decoration: none;
color: #333;
}
img{
vertical-align: middle;
}
これは単純なバージョンです。より複雑なバージョンについては、一般的な CSS スタイル テンプレートとCSS の一般的なスタイルの概要を参照してください。
3.グローバルスタイルの導入
次の内容のスタイルで新しいindex.cssファイルを作成します。
@import url(./base.css);
でmain.js、index.css ファイルを導入します。
// 自定义基础样式库
import './styles/index.css'
導入後の効果は以下の通りです
一般に、UI デザイン図面の幅は 750 ピクセルで、vant は 375 ピクセルに基づいています。UI デザイン図面上のサイズが 16 ピクセルの場合、デザイン図面と一致させるには、それを 32 ピクセルに設定する必要があります。
3. axiosリクエストの設定
1. axiosをダウンロードし、リクエストリクエストを設定する
ポータルaxios 中国語ドキュメント | axios 中国語 Web サイト
npm install axios -S
src ディレクトリに utils フォルダを作成し、
その中に新しいrequest.jsファイルを作成します
ここでは、リクエストにはトークンを運ぶ必要があることと、本番環境と開発環境の設定が必要であると考えています
。request.js を説明せずに直接投稿しました。コメントが付いています。詳細は Ruoyi プロジェクトを参照してください。多くのスキャフォールディング機能は Ruoyi バックエンド システムから提供されます。
import axios from 'axios'
import errorCode from '@/utils/errorCode'
import {
getToken
} from '@/utils/auth'
import {
Dialog,
Notify
} from 'vant';
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
// axios中请求配置有baseURL选项，表示请求URL公共部分
baseURL: process.env.VUE_APP_BASE_API, // 本地后台接口||服务器接口
// 超时
timeout: 40000
})
// request拦截器
service.interceptors.request.use(config => {
// 是否需要设置 token
const isToken = (config.headers || {
}).isToken === false
// config.headers['Authorization'] = sessionStorage.getItem('token') // 让每个请求携带自定义token 请根据实际情况自行修改
// config.headers['token'] = sessionStorage.getItem('token') // 让每个请求携带自定义token 请根据实际情况自行修改
config.headers['Authorization'] = 'Bearer ' + getToken()
// get请求映射params参数
if (config.method === 'get' && config.params) {
let url = config.url + '?';
for (const propName of Object.keys(config.params)) {
const value = config.params[propName];
var part = encodeURIComponent(propName) + "=";
if (value !== null && typeof (value) !== "undefined") {
if (typeof value === 'object') {
for (const key of Object.keys(value)) {
let params = propName + '[' + key + ']';
var subPart = encodeURIComponent(params) + "=";
url += subPart + encodeURIComponent(value[key]) + "&";
}
} else {
url += part + encodeURIComponent(value) + "&";
}
}
}
url = url.slice(0, -1);
config.params = {
};
config.url = url;
}
return config
}, error => {
console.log(error)
Promise.reject(error)
})
// 响应拦截器
service.interceptors.response.use(res => {
// 未设置状态码则默认成功状态
const code = res.data.code || 200;
// 获取错误信息
const msg = errorCode[code] || res.data.msg || errorCode['default']
// 二进制数据则直接返回
if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
return res.data
}
if (code === 401) {
return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
} else if (code === 402) {
return Promise.reject(new Error(msg))
} else if (code === 403) {
return Promise.reject(new Error(msg))
} else if (code === 500) {
Notify({
type: 'danger',
message: msg
});
return Promise.reject(new Error(msg))
} else if (code === 601) {
Notify({
type: 'warning',
message: msg
});
return Promise.reject('error')
} else if (code !== 200) {
Dialog({
title: '错误',
message: msg
});
return Promise.reject('error')
} else {
return res.data
}
}, error => {
console.log('err' + error)
let {
message
} = error;
if (message == "Network Error") {
message = "后端接口连接异常";
} else if (message.includes("timeout")) {
message = "系统接口请求超时";
} else if (message.includes("Request failed with status code")) {
message = "系统接口" + message.substr(message.length - 3) + "异常"; // 例如502异常
// message = "系统更新服务中，请稍后重试";
}
// 弹出报错信息
Notify({
message: message,
type: 'danger',
duration: 5 * 1000,
});
return Promise.reject(error)
}
)
// 使用a标签下载
export function fileDown(blobUrl, filename) {
const a = document.createElement("a");
if (!a.click) {
throw new Error('DownloadManager: "a.click()" is not supported.');
}
a.href = blobUrl;
a.target = "_parent";
if ("download" in a) {
a.download = filename;
}
(document.body || document.documentElement).append(a);
a.click();
a.remove();
}
export default service
- 上記のコードには getToken メソッドがありません
- errorCode変数も欠落しています
不着急，慢慢来
2. getTokenメソッドの導入
utils フォルダーに auth.js ファイルを作成します。
import Cookies from 'js-cookie'
const TokenKey = 'Admin-Token'
export function getToken() {
return Cookies.get(TokenKey)
}
export function setToken(token) {
// 设置60分钟后过期
const inFifteenMinutes = new Date(new Date().getTime() + 60 * 60 * 1000);
return Cookies.set(TokenKey, token, {
expires: inFifteenMinutes })
}
export function removeToken() {
return Cookies.remove(TokenKey)
}
ここにプラグインをインストールする必要があります
npm install --save js-cookie
3. errorCode変数を導入する
utils フォルダーに errorCode.js ファイルを作成します。
export default {
'401': '认证失败，无法访问系统资源',
'403': '当前操作没有权限',
'404': '访问资源不存在',
'default': '系统未知错误，请反馈给管理员'
}
4. 環境環境のセットアップ
1.ローカル環境devを作成する
src の外に名前を付けたファイルを作成します.env.development
#模式
NODE_ENV = 'development'
# // 通过"VUE_APP_MODE"变量来区分环境
VUE_APP_MODE = 'development'
# 请求路径
VUE_APP_BASE_API = '/dev-api'
# 这是开发环境,未上线
# ******************* ** ** **
# ** ** ****************
# ** ** **
# ******************* ************
# ** ** *** **
# ** ** ** ** **
# ** ** ** ***
# ** ** ** ** ***
2. サーバー環境の製品を作成する
src の外に名前を付けたファイルを作成します.env.production
#模式
NODE_ENV = 'production'
#通过"VUE_APP_MODE"变量来区分环境
VUE_APP_MODE = 'production'
#api地址
VUE_APP_BASE_API = '/prod-api'
# 这是上线环境,已投入使用
環境構成はVUE_APP_BASE_APIプロキシ リクエストであり、変更できます。バックエンドがどのように呼び出しまたは変更するかによって異なります。
たとえば、リスト リクエストを開始しました。この 192.168.1.6 は私のコンピュータ IP です。バックエンド Java のコンピュータ IP は 192.168 です。 .1.7など。
/dev-api を通じて彼のコンピュータ上のインターフェイスをリクエストしました
五、vue.config.js
package.jsonと同じレベル
1.vue.config.jsを作成する
const webpack = require('webpack')
const path = require("path")
const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {
lintOnSave: false,
devServer: {
port: 8088,
host: '0.0.0.0',
open: true,
proxy: {
[process.env.VUE_APP_BASE_API]: {
target: `http://192.168.1.66:8080`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
},
},
historyApiFallback: true, // 设置了当服务端收到 404 请求时，将会返回 index.html 文件
},
configureWebpack: {
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
'assets': '@/assets'
}
},
plugins: [
// http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件
new CompressionPlugin({
cache: false, // 不启用文件缓存
test: /\.(js|css|html)?$/i, // 压缩文件格式
filename: '[path].gz[query]', // 压缩后的文件名
algorithm: 'gzip', // 使用gzip压缩
minRatio: 0.8 // 压缩率小于1才会压缩
}),
// maxChunks：使用大于或等于 1 的值，来限制 chunk 的最大数量。使用 1 防止添加任何其他额外的 chunk，这是因为 entry/main chunk 也会包含在计数之中。
//minChunkSize: 设置 chunk 的最小大小。
// 限制打包的个数(减少打包生成的js文件和css文件)
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 10,
minChunkSize: 100
})
],
},
publicPath: "/",
assetsDir: './',
assetsDir: 'static', // 整合css和js到这里
outputDir: 'app', // 打包名称，例如默认为dist
}
このコードは使用されていますcompression-webpack-pluginが、プロジェクトには含まれていません。インストールする必要があります。インストールしないと赤色で表示されます。
これにはバージョンの問題があり、最新バージョン 10.0.0 を直接ダウンロードしましたが、プロジェクトが実行できませんでした。その後、古いプロジェクトのバージョンを見つけました。
すでにバージョンを指定しているので、直接インストールできます。
npm install [email protected] --save-dev
インストール後、package.json の構成を確認してください。
由于vue的特性、env、vue.config.js を変更するには、プロジェクトを再起動する必要があります。
2. バックグラウンドインターフェイスアドレスを変更します。
このターゲット、これはローカル バックエンド Java 開発アドレスです
6. APIリクエストを書く
1.インターフェースの作成
src ディレクトリに [api] フォルダを作成し、テスト用の api 配下に test.js を作成します。これは後で他のインターフェイスを記述する方法なので、
最初に api フォルダに統合し、その後、別の vue ページに導入します。
import request from '@/utils/request'
// 查询常用意见列表
export function listComment(query) {
return request({
url: '/flow/comment/list',
method: 'get',
params: query
})
}
// 查询常用意见详细
export function getComment(id) {
return request({
url: '/flow/comment/' + id,
method: 'get'
})
}
// 新增常用意见
export function addComment(data) {
return request({
url: '/flow/comment',
method: 'post',
data: data
})
}
// 修改常用意见
export function updateComment(data) {
return request({
url: '/flow/comment',
method: 'put',
data: data
})
}
// 删除常用意见
export function delComment(id) {
return request({
url: '/flow/comment/' + id,
method: 'delete'
})
}
2.vueページにAPIメソッドを導入する
Home.vueページで紹介されました
import {
listComment } from "@/api/test.js"
次に、メソッドメソッドを記述し、作成されたメソッドでリクエストします。
<template>
<div class="home">
<h1>这是h1标签</h1>
<h2>这是h2标签</h2>
<h3>这是h3标签</h3>
<h4>这是h4标签</h4>
<h5>这是h5标签</h5>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
</div>
</template>
<script>
// @ is an alias to /src
import {
listComment } from "@/api/test.js"
export default {
name: 'Home',
components: {
},
data() {
return {
}
},
created() {
this.getList()
},
methods: {
// 获取列表
getList() {
listComment().then(res => {
})
}
}
}
</script>
f12 コンソールを開き、ネットワーク リクエストを表示します。
すでにここでデータをリクエストしています
同様に、この JS に他のメソッドを導入するには、後から追加するだけです。
import {
listComment , ***list , ***del , ...... } from "@/api/test.js"
次に、以下に示すように、さまざまな js パッケージに分割する必要があるさまざまな js があります。
7. Bin スクリプト ファイル、ワンクリックで実行
プロジェクトを開くたびに npm runserve と手動で書く必要があり面倒ですが、ここに bin スクリプトが組み込まれており、
src と同じ階層に bin という名前のフォルダが作成されます。
1. パッケージ化 – build.bat
@echo off
echo.
echo [信息] 打包Web工程，生成dist文件。
echo.
%~d0
cd %~dp0
cd ..
npm run build
pause
2. 依存関係をダウンロードします – package.bat
@echo off
echo.
echo [信息] 安装Web工程，生成node_modules文件。
echo.
%~d0
cd %~dp0
cd ..
npm install --registry=https://registry.npm.taobao.org
pause
3. 実行 – run-web.bat
@echo off
echo.
echo [信息] 使用 Vue CLI 命令运行 Web 工程。
echo.
%~d0
cd %~dp0
cd ..
npm run serve
pause
最初に js を作成し、それを書き込んでからサフィックス名を変更するか、名前を直接作成して VSCode で編集できるように開きます。
ダブルクリックして実行します。npm run dev が実行メソッドである場合は、内部のサーバーを dev に変更するだけです。
要約する
gitee リンク、ポータルが公開されました
非常に優れたモバイル端末プロジェクトの足場、軸、環境、適応がすべて準備されています。vuex に Ruoyi を使用することも、自分で作成することもできます
vuex には 2 つのタイプがあり、1 つはサブモジュールを持たず、もう 1 つはサブモジュールを持たず、store/index.js に直接記述することができます。
サブモジュールがある場合は、そのサブモジュールを親モジュールにインポートし、親モジュールをモジュールに登録します。vue ページに導入されると、追加のモジュール層が存在します。
以下は私が自分で書いたもので、サブモジュールを備えた単純なバージョンです。
vuex のマルチモジュール使用法の簡易版
由于这个项目我建的时候选择的是scss渲染器なので、レンダラーが少なくなるわけではありません。再構築するときは、 dart-scss で scss を選択するか、インストールを減らしてから scss をインストールすることもできます。記事全体にlessやscssに関するコードは書かれていません。