vueのCLIの使い方
Vue.jsは、大規模な単一ページアプリケーションを迅速に構築するための公式コマンドラインツールを提供し、このツールは開梱して使用する構築ツールの構成を提供し、現代化されたフロントエンド開発プロセスをもたらします.ホット・リロード、保存時の静的チェック、および本番環境の構築構成に使用可能なプロジェクトを作成および開始するには、数分かかります.
準備条件
インストールコマンド
デフォルトのポートは8080でブラウザに直接アクセスhttp://localhost:8080ページが表示されると、インストールに成功します.
ページを追加してみましょう.
準備条件
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
home
vue , :
localhost:8080/home components Home.vue