導(dǎo)入Vue方法的方式有很多種,這里我們介紹使用Vue CLI創(chuàng)建項(xiàng)目并導(dǎo)入Vue的方法。
首先,我們需要安裝Vue CLI。打開(kāi)終端(Windows系統(tǒng)下為命令提示符),輸入以下命令:
npm install -g vue-cli
安裝完成后,我們就可以使用Vue CLI創(chuàng)建項(xiàng)目了。輸入以下命令:
vue init webpack my-project
其中,my-project
是你要?jiǎng)?chuàng)建的項(xiàng)目名稱,可以根據(jù)實(shí)際情況進(jìn)行更改。在創(chuàng)建過(guò)程中,會(huì)讓我們選擇是否安裝一些插件,如ESlint、unit tests等,可以根據(jù)自己的需求進(jìn)行選擇。
創(chuàng)建完成后,進(jìn)入到項(xiàng)目目錄中,輸入以下命令安裝依賴:
cd my-project
npm install
安裝完成后,我們就可以導(dǎo)入Vue了。在App.vue
文件中,我們可以看到這樣一段代碼:
<template>
<div id="app">
<img src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
這里的import
語(yǔ)句就是我們導(dǎo)入Vue的方法。我們可以在需要使用Vue的組件中,加入類似的import Vue from 'vue'
語(yǔ)句,然后就可以愉快地使用Vue了。