python module

@nuxtjs/python

เขียนแอพ nuxt.js ใน Python

บันทึกย่อ

คุณสมบัติ

• เขียนแอปพลิเคชัน Nuxt 2 โดยใช้ Python!
• ปัจจุบันรองรับ JavaScripthon ที่กำหนดเองเท่านั้น แต่ในอนาคตคอมไพเลอร์อื่น ๆ ก็คาดว่าจะทำงานได้เช่นกัน

ลองตัวอย่าง

1. โคลนที่เก็บนี้และเปลี่ยนไดเรกทอรีเป็น
2. ติดตั้งการพึ่งพา:

    npm install                         # or use yarn
   
   pip install -r requirements.txt
   

3. ตัวอย่างรัน: npm run dev

การตั้งค่าในโครงการของคุณเอง

• เพิ่ม @nuxtjs/python การพึ่งพาโดยใช้เส้นด้ายหรือ npm ในโครงการของคุณ
• เพิ่ม @nuxtjs/python ไปยังส่วน modules ของ nuxt.config.js

   {
    modules : [
      '@nuxtjs/python'
    ] ,
    python : {
      compiler : 'pj'   // default
    }
  }

• ในไฟล์ Vue ทำเครื่องหมายแท็กสคริปต์ของคุณเช่นนี้: <script lang="py">
• คุณสามารถส่งตัวเลือกไปยัง py-loader (ปัจจุบันรองรับพารามิเตอร์ compiler )

ตัวเลือกของ Python ไปยัง JavaScript Compiler

ค่าเริ่มต้นของคอมไพเลอร์และแนะนำคือ JavaScripthon แต่เป็นไปได้ที่จะใช้คอมไพเลอร์อื่น ๆ (ดูด้านล่าง)

• ติดตั้ง Transpiler JavaScripthon Python ตอนนี้ คุณจะต้องมีสาขาหลัก เช่น:

   pip install -e git+https://gitlab.com/metapensiero/metapensiero.pj#egg=javascripthon
  

• โปรดทราบว่า JavaScripthon ต้องการให้คุณมี Python 3.5 (หรือดีกว่า)

• Javascripthon สนับสนุนการแปลงคำสั่งนำเข้า Python เป็นการนำเข้า ES6 ตามที่ใช้ใน Nuxt โปรดทราบการแปลงไวยากรณ์

• คุณสามารถผ่านตัวเลือก compiler ไปยัง py-loader โดยใช้ตัวเลือกโมดูลหรือในส่วน python ในไฟล์ nuxt.config.js ของคุณ

• Transcrypt มีระบบโมดูลของตัวเองดังนั้นในการใช้งานคุณสามารถใช้มาตรฐานโมดูล CommonJS ( require นำเข้าและ module.exports ) และควรใช้งานได้ ดูตัวอย่าง vuejs py-loader

การใช้งาน

ใช้ไฟล์ .vue

เคล็ดลับ หากคุณใช้ VIM คุณจะได้รับการไฮไลต์ไวยากรณ์สำหรับ HTML, CSS และ Python โดยการติดตั้งปลั๊กอิน VIM-vue และใช้แพตช์นี้

hello.vue :

 < template >
  < div >
      Nuxt {{ best_lang }}
  </ div >
</ template >

< script lang =" py " >
class Component :
  def __init__ ( self ) :
      self [ ' data '] = lambda: { ' best_lang ': ' Python ' }

__default__ = Component ( )
</ script >

ใช้ไฟล์ .py สำหรับไฟล์ nuxt อื่น ๆ

store/index.py

 from vuex import Store

def increment ( state ):
    state . counter = state . counter + 1

def createStore ():
    return Store (
      state = { 'counter' : 0 },
      mutations = { 'increment' : increment }
    )

__default__ = createStore

pages/counter.vue

 < template >
  < h2 > {{ $store.state.counter }} </ h2 >
  < button @click =" $store.commit('increment') " > +1 </ button >
</ template >

สำหรับตัวอย่างการทำงานดูที่นี่

การพัฒนา

• โคลนที่เก็บนี้
• ติดตั้งการพึ่งพาโดยใช้ yarn install หรือ npm install
• เริ่มต้นเซิร์ฟเวอร์การพัฒนาโดยใช้ npm run dev

ใบอนุญาต

ใบอนุญาต MIT

ลิขสิทธิ์ (c) sebastian silva [email protected]

โมดูลนี้เริ่มต้นจากโมดูล-เทมเพลตโดย Pooya Parsa และอาศัย Python-Webpack-Loader อย่างมากโดย Martim Nascimento และ Javascripthon โดย Alberto Berti