vueのCLIの使い方

1644 ワード

Vue.jsは、大規模な単一ページアプリケーションを迅速に構築するための公式コマンドラインツールを提供し、このツールは開梱して使用する構築ツールの構成を提供し、現代化されたフロントエンド開発プロセスをもたらします.ホット・リロード、保存時の静的チェック、および本番環境の構築構成に使用可能なプロジェクトを作成および開始するには、数分かかります.
準備条件
node.js     
    :https://nodejs.org/zh-cn/
      。

インストールコマンド
#     vue-cli
npm install --global vue-cli

#       webpack       
vue init webpack my-project

#     
cd my-project
npm install

#   
npm run dev


デフォルトのポートは8080でブラウザに直接アクセスhttp://localhost:8080ページが表示されると、インストールに成功します.
        :

--build
--config
--node_modules
--src(    )
   |--assets 
   |--components(          )
   |--router(    router    )
       |--index.js
   |--APP.vue
   |--main.js
--index.html


ページを追加してみましょう.
 router/index.js   helloWord    Home  。


import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'   //    

Vue.use(Router)

export default new Router({
  mode:'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    
    //    home   import  
    {
      path: '/home',  //      localhost:8080/home
      name: 'Home',   //   
      component: Home   //  import      
    },
    
    //            ,          
    {path:'*',redirect:'/'}
  ]
})


         ,    components       Home.vue    


       vue     ,         :
localhost:8080/home     components    Home.vue