หน้าแรก>ซอร์สโค้ด PHP>หมวดหมู่อื่นๆ
ดาวน์โหลด

ดัชนี

  • สรุป
  • ติดตั้ง
  • ใช้
  • ต่ออายุ
  • การกำหนดค่า
  • สถาปัตยกรรม
  • ปัญหาที่ทราบ
  • ใบอนุญาต

สรุป

ผู้ดูแลระบบที่แก้ไขตามเทมเพลต Webpack4.x ของ vue-cli โปรดอย่าดาวน์โหลดโค้ดเบื้องต้นไม่มีฟังก์ชันใด ๆ มีไว้เพื่อความสนุกสนานและการฝึกฝนเท่านั้น

อัปเดตคำแนะนำ

  • 2018/6/19 อัปเกรด webpack ใช้ webpack4 และแนะนำปลั๊กอิน mini-css-extract-plugin ใหม่

ติดตั้ง 

 ＃克隆该项目
git clone https://github.com/iTaster/webpack4-template

# 安装依赖关系
npm install

# 编译开发环境
npm run dev

ตามค่าเริ่มต้น http://localhost:1988/ จะถูกเปิดโดยอัตโนมัติ

ใช้ 

 # 编译生产环境
npm run build

# 构建生产环境
npm run build --report

ต่ออายุ

เพื่อให้แน่ใจว่ามีการอัปเดตโมดูลโครงการในภายหลัง 

 # 检测模块
npm outdated

# 更新模块
npm update

# 删除 node_modules 文件
npm install rimraf -g
rimraf node_modules

คำสั่ง npm outdated จะตรวจสอบโมดูลที่ติดตั้งของคุณและบอกคุณว่าโมดูลใดล้าสมัย

ข้อมูลเฉพาะประกอบด้วย: เวอร์ชันที่ติดตั้งในปัจจุบัน (ปัจจุบัน) เวอร์ชันที่คุณควรอัปเดตเป็น (ต้องการ) และเวอร์ชันล่าสุดในพื้นที่เก็บข้อมูล (ล่าสุด)

การกำหนดค่า

  1. หากคุณต้องการอัปโหลดโฟลเดอร์ dist เพียงลบ /dist ในการกำหนดค่าไฟล์ที่ถูกละเว้น ( ไฟล์ . .gitignore )

  2. ตามค่าเริ่มต้น ไฟล์ทรัพยากรที่คอมไพล์และประมวลผลโดย webpack จะถูกจัดเก็บไว้ในโฟลเดอร์ static ที่ หากคุณต้องการจัดเก็บไว้ในไดเร็กทอรีไฟล์รูทเท่านั้น ให้แก้ไขพารามิเตอร์ build.assetsSubDirectory ภายใต้ config/index.jx เพื่อเว้นว่างไว้ แต่ไม่แนะนำ! ด้วยวิธีนี้ เส้นทางรูปภาพบางเส้นทางจะผิดเมื่อทำการบรรจุ ขอแนะนำให้วางทรัพยากรที่มีขนาดน้อยกว่า 10kb และไอคอน svg บางส่วน (ซึ่งโดยทั่วไปจะไม่มีการเปลี่ยนแปลง) ไว้ในโฟลเดอร์ src/assets และรายการอื่นๆ จะถูกวางไว้ในโฟลเดอร์ static โฟลเดอร์

  3. ตามค่าเริ่มต้น ไฟล์ css/js ที่จัดทำแพ็กเกจจะมี source map ซึ่งมีประโยชน์มากสำหรับการดีบักโค้ดในสภาพแวดล้อมการพัฒนา อย่างไรก็ตาม ไม่แนะนำในสภาพแวดล้อมการคอม config/index.js ล์และการใช้งานจริง ของ build.productionSourceMap เป็น: false

  4. หากโค้ดทำงานบนเซิร์ฟเวอร์และคุณไม่ต้องการให้ #/ ในแถบที่อยู่ คุณจะต้องลบ mode: 'history' ใน router/index.js (จำเป็นต้องมีการกำหนดค่าแบ็กเอนด์ด้วย ไม่เช่นนั้นหน้าเพจจะดับลง) จะรีเฟรช 404) หากเพจจำเป็นต้องใช้การข้ามจุดยึดไปที่ตำแหน่งที่ระบุและลบคำอธิบายประกอบ scrollBehavior

  5. มันมาพร้อมกับปลั๊กอิน autoprefixer การเขียนโค้ด css โดยตรงในไฟล์ vue จะเพิ่มคำนำหน้าโดยอัตโนมัติ

สถาปัตยกรรม

แนะนำให้ใช้โครงสร้างไดเร็กทอรีต่อไปนี้ในการพัฒนาหน้าเดียวขนาดใหญ่: 

src
    ├── README.md
    ├── assets                  // 全局资源目录
    │    ├── images            // 图片
    │    ├── css               // CSS 样式表
    │    └── fonts             // 自定义字体文件
    ├── components              // 公共组件目录
    │    ├── NavMenu.vue
    │    ├── Slider.vue
    │    └── ...
    ├── directives               // 公共指令
    ├── filters                  // 公共过滤器
    ├── i18n                     // 国际化
    │    ├── index.js           // 入口文件
    │    ├── zh.js
    │    └── en.js
    ├── router                   // 路由
    │    └── index.js
    ├── store                    // 状态管理
    │    ├── index.js        
    │    └── ...
    ├── views                    // 页面视图
    │    ├── login
    │    │    ├── index.vue
    │    │    ├── LoginForm.vue
    │    │    └── LoginSocial.vue
    │    ├── home
    │    │    ├── index.vue
    │    │    ├── HomeBanner.vue
    │    │    └── ...
    │    └── ...
    ├── App.vue                // 默认程序入口
    └── main.js

ข้อได้เปรียบ:

  • หากคุณต้องการใช้ /login ในโปรเจ็กต์อื่น เพียงคัดลอกหรือย้ายไปยังไดเร็กทอรี /components

  • ตราบใดที่คุณได้ติดตั้งการขึ้นต่อกันภายนอกและคุณได้กำหนดตัวโหลดเดียวกันในการกำหนดค่า โปรเจ็กต์ก็ควรจะทำงานได้ดี

ปัญหาที่ทราบ

  • มีข้อผิดพลาดในการซ่อนแถบด้านข้างด้านซ้าย

มีส่วนช่วย

คุณสามารถมีส่วนร่วมกับโครงการนี้ได้อย่างอิสระโดยการส่งประเด็นและ/หรือดึงคำขอ โปรเจ็กต์นี้ได้รับการทดสอบ ดังนั้นโปรดจำไว้ว่าการเปลี่ยนแปลงและฟีเจอร์ใหม่ทั้งหมดควรครอบคลุมโดยการทดสอบ

ใบอนุญาต

โครงการนี้ได้รับอนุญาตภายใต้ MIT

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด