新建的vue項目文件結構
在一個新建的Vue項目中,有三個重要的文件:main.js、和。其中,文件位于項目目錄下,而main.js和文件位于項目目錄的src目錄下。運行項目在項目路徑下運行npm run dev命令后,可以在
在一個新建的Vue項目中,有三個重要的文件:main.js、和。其中,文件位于項目目錄下,而main.js和文件位于項目目錄的src目錄下。
運行項目
在項目路徑下運行npm run dev命令后,可以在網頁中查看運行頁面。這里的文件是默認的主渲染頁面文件,它起到了展示Vue實例的作用。
修改文件
如果想要修改的標題,只需要在文件中找到title標簽,然后修改其內容即可。此外,還可以通過在body中增加一個div來改變頁面的內容。刷新頁面后,可以看到頁面標題和內容都發(fā)生了變化。
main.js的作用
src/main.js是項目的入口文件,主要作用是初始化Vue實例并使用需要的插件。在main.js文件中定義了一個Vue對象,其中el為實例提供掛載元素。通過這個對象,可以將所需的組件渲染到文件的相應位置上。
中div的id值的作用
在文件的body中,只有一句
,但頁面上卻顯示出了許多元素。這是因為在src/main.js中新建的Vue對象起到了作用。可以看到Vue的el項值與中div的id值相同,即"#app"。這樣,Vue會查詢id值為app的DOM元素,并將所需的組件渲染到該元素中。類似地,如果使用class名進行選擇,可以通過.className來表示。改變div的id值導致的界面變化
如果修改中div的id值,使之與main.js中的Vue對象不一致,界面將會顯示為空白界面,因為Vue無法找到對應的掛載元素。
使用template替換掛載的元素
在main.js中,可以注釋掉Vue的route項和components項,只保留template模板項。此時,Vue的模板將會替換掛載的元素,而掛載的元素內容將被忽略。例如,可以將中的
替換為