前回の記事では、Viteと の違いを比較しましたWebpack。次に、プロジェクトで使用していたWebpack 5.0ものを置き換える準備としてVite 2.0、まず開発/本番環境を一から構築します。
1. 初期化
-
1. 初期化
package.jsonnpm init// 最後まで入力してください -
2. インストール
Vite（nodeバージョン要件14.18 +）yarn add vite --devまたはnpm install vite -D -
3. プロジェクトの初期化
初期化ディレクトリ構造
config/vite.config.js設定ファイル、index.htmlエクスポートファイル、index.jsエントリファイル、srcディレクトリソースコードViteこれは必要なファイルの取得を要求することESMに基づいているためHTTP、入り口では次index.jsの点に注意する必要があります。- 1.
typeのためのmodule - 2.
srcパスには絶対パスを使用する必要があります。
- 1.
-
4. パッケージ化コマンドの設定
package.json: ここでは、--openウィンドウを開くこと、-cカスタマイズされた構成を使用すること、-m環境を指定することdevelopment、またはproduction"scripts": { "dev": "vite serve -c ./config/vite.config.js -m development --open", "build": "vite build -c ./config/vite.config.js -m production" }さらに構成を参照:
npx vite --help
2. 構成
-
1. 基本構成
を設定したことのある学生は
wepbackこの設定に慣れていると思いますが、 に比べてwebpack非常に簡単な設定です。設定方法がわからないwebpack学生はwebpack、まず設定に慣れることをお勧めします。クリックして入力: Webpack 4.X SPA シングルページ アプリケーションを最初から構成するimport { defineConfig } from 'vite' import { resolve } from 'path' export default defineConfig({ root: process.cwd(), // 项目根目录 base: '/', // 项目基准路径，默认 / publicDir: 'public', // 静态资产的目录，默认 public cacheDir: 'node_modules/.vite', // esbuild预构建缓存(依赖/缓存) resolve: { // 项目别名 alias: { '@': resolve(__dirname, '../src'), 'pages': resolve(__dirname, '../src/pages') }, extensions: ['.js', '.vue', '.json'] // 引入对应的文件时可以忽略其后缀 } })開発環境はここから開始できます。
Viteデフォルトの構成dev server、直接実行npm run dev、エラーや不足しているesbuild依存関係の検出、依存関係のインストールに役立ちます。npm install esbuild-windows-64 -D
インストールが成功したら、再実行して
npm run dev正常に起動しますが、ここではデフォルトの設定を使用しているため、拡張を容易にするために、ここで再設定する必要があります。dev server
-
2. 開発環境を構成する
server: { host: '0.0.0.0', // 服务器主机名，如果允许外部访问，可设置为 "0.0.0.0" port: 3000, // 服务器端口号：默认3000，如果被占用，自动切换 open: true, // 是否自动打开浏览器 strictPort: false, // 设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口 force: true, //是否强制依赖预构建 proxy: proxyConfig // 代理 } // proxyConfig.js: export default { '/api': { target: 'http://xxx.com', changeOrigin: true, rewrite: path => path.replace(/^\/api/, '') }, '/socket.io': { target: 'ws://localhost:3000', ws: true } } -
3.
CSSプリプロセッサとプレフィックスを構成するを使用する場合は、ダウンロードやパッケージ化
sassの必要はなく、直接インストールするだけです。ここでは、直接ダウンロードして使用します。node-sasssass-loadersasslesslessnpm iless autoprefixer postcss -D
lessプリプロセッサの構成import { resolve } from 'path' export default defineConfig({ ... css: { preprocessorOptions: { less: { additionalData: `@import "${ resolve(__dirname, '../src/assets/css/common.less')}";`, // 配置 less 全局变量 javascriptEnabled: true } }, devSourcemap: true, // 在开发过程中是否启用 sourcemap } })- 設定
autoprefixerプレフィックスの自動補完
postcss.config: 設定autoprefixermodule.exports = { "plugins": { "autoprefixer": { }, } }package.json構成互換処理
設定が完了したら、効果を確認して有効にしてみましょう。{ "browserslist": [ "defaults", "not ie < 11", "last 2 versions", "> 1%", "iOS 7", "last 3 iOS versions" ] }
-
4.
vue 3.0開発環境の構成-
4.1 依存関係のインストール
1. インストール
vue環境: npm i vue -D またはyarn add vue --dev
2. インストールvue plugin: npm i @vitejs/plugin-vue -D またはyarn add @vitejs/plugin-vue --dev -
4.2 構成
vue環境vite.config.js:vite構成import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [ vue() ] })index.js：エントリーファイルimport { createApp } from 'vue' import App from './App.vue' const app = createApp(App) app.mount('#root')App.vue: 親コンポーネント<template> <div class="container"> { { num }} </div> </template> <script> import { ref, onBeforeMount } from 'vue' export default { setup() { let num = ref(0) onBeforeMount(_ => { console.log(num.value) }) return { num } } } </script> <style lang="less"> .app { font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif !important; /*网页默认字体，顺序优先级*/ font-size: 16px; /*网页默认字体大小*/ user-select: none; /*页面文字禁止选中*/ -webkit-font-smoothing: antialiased; /*字体进行抗锯齿渲染*/ -moz-osx-font-smoothing: grayscale; /*字体进行抗锯齿渲染*/ box-sizing: border-box !important; /*解决怪异盒模型*/ -webkit-backface-visibility: hidden; /*使用CSS Transforms 或者 Animations时可能会有页面闪烁的Bug*/ -webkit-tap-highlight-color: transparent; /*cursor为pointer时，移动端会有蓝色背景：*/ scroll-behavior: smooth; /*浏览器默认滚动触发时添加过渡动画*/ transform: translateZ(0); /*硬件加速*/ } </style>走りながら試してみると
npm run dev完璧です
-
4.3
vue-routerルーティングの構成npm i vue-router@4 -S
router/index.jsルーティング設定。ここではルーティング モード パラメータはhistoryありませんmode。ソース コードからパラメータを確認できます。import { createRouter, createWebHashHistory } from 'vue-router' const Home = () => import('../pages/home') const routes = [ { path: '/', redirect: { path: '/Home' } }, { path: '/Home', name: 'Home', component: Home } ] export default createRouter({ history: createWebHashHistory(), routes, }) -
4.4 構成
vuexステータスの管理npm i vuex@next -S
store/index.js: ステータス管理モジュールは新バージョンに組み込まれておりcreateLogger、直接導入できます。import { createStore, createLogger } from 'vuex' import app from './module/app' export default createStore({ modules: { app // 单个管理模块 }, plugins: [ createLogger ], // 修改 state 时打印日志 strict: true // 严格模式，不允许直接修改 state })home.vue: 単一のルーティング コンポーネントによって使用されます。<template> <div>Home</div> </template> <script> import { ref, onMounted } from 'vue' import { useStore } from 'vuex' export default { setup() { let store = useStore() onMounted(_ => { // 获取配置文件 store.dispatch('_getConfig', { mode: 'T' }) }) return { store } } } </script> -
4.5 構成
elementコンポーネントライブラリnpm install element-plus -S
!!!インストール中に、次のエラーが報告される場合があります。このクエリは
esbuild、bug処理方法は次のとおりです: 現在のディレクトリで実行:node ./node_modules/esbuild/install.js
コマンドを実行した後、再度ダウンロードすると完璧な解決策になります
index.js:導入と使用、ここでの順序に注意する必要があります。最初にプラグインをロードしてからマウントします。import { createApp } from 'vue' import element from 'element-plus' import '@/assets/css/index.css' import App from './App' const app = createApp(App) app.use(element) app.mount('#root')
-
5. 実稼働環境の構成
import { resolve } from 'path' export default defineConfig({ ... build: { outDir: resolve(__dirname, '../dist'), // 指定输出路径（相对于 项目根目录) assetsDir: 'static', // 指定生成静态资源的存放路径（相对于 build.outDir) cssCodeSplit: true, // 启用 CSS 代码拆分 chunkSizeWarningLimit: 500, // chunk 大小警告的限制（以 kbs 为单位） sourcemap: false // 构建后是否生成 source map 文件 } })異なる環境に応じて異なる構成を切り替える場合は、現在の環境である
.env.[mode]ルートディレクトリに構成を作成できます。mode.env # 所有情况下都会加载 .env.local # 所有情况下都会加载，但会被 git 忽略 .env.[mode] # 只在指定模式下加载 .env.[mode].local # 只在指定模式下加载，但会被 git 忽略現在、現在の環境変数に基づいて特定のロジックを実行することもできます。
import.meta.env.MODE: {string} アプリケーションが実行されるモードimport.meta.env.BASE_URL: {string} アプリケーションをデプロイするときの基本URL。base設定項目により決まります。import.meta.env.PROD: {boolean} アプリケーションが実稼働環境で実行されているかどうかimport.meta.env.DEV: {boolean} アプリケーションが開発環境で実行されているかどうか (常にそのimport.meta.env.PROD逆)
-
3.終了
この時点で、シンプルで実践的なvite+vue 3.0プロジェクトが基本的に構築されていますが、eslintコードの仕様、vuex hooks統合、cdn読み込み、Typescript環境などは後ほど追加されます。