在Vue項(xiàng)目中，我們常常需要新建文件來擴(kuò)展功能或者組織代碼，包括新建組件、路由文件、公共工具類等。下面我們來介紹在Vue項(xiàng)目中如何新建文件。

//在src/components文件夾下新建一個(gè)HelloWorld.vue文件

在上面的代碼中，我們新建一個(gè)HelloWorld組件，包括一個(gè)模板和一個(gè)JavaScript腳本文件，在腳本文件中我們可以使用export default關(guān)鍵字來導(dǎo)出當(dāng)前組件。

//在src/router文件夾下的index.js文件中添加一行代碼
import NewPage from '../views/NewPage.vue'
const routes = [
{
path: '/newpage',
name: 'NewPage',
component: NewPage
}
]

在上面的代碼中，我們?cè)诼酚膳渲弥性黾恿艘粋€(gè)NewPage路由，然后將該路由映射到我們創(chuàng)建的NewPage組件上。在這個(gè)過程中，我們需要先在src/views文件夾下新建一個(gè)NewPage.vue文件，然后在路由配置中引用該組件。

//在src/utils文件夾下新建一個(gè)common.js文件
export const formatTime = (time) =>{
const date = new Date(time)
const year = date.getFullYear()
const month = padZero(date.getMonth() + 1)
const day = padZero(date.getDate())
return `${year}-${month}-${day}`
}
const padZero = (num) =>{
return num< 10 ? '0' + num : num
}

在上面的代碼中，我們?cè)趕rc/utils文件夾下新建了一個(gè)common.js文件，并導(dǎo)出了一個(gè)formatTime方法，該方法接收一個(gè)時(shí)間戳并返回一個(gè)格式化后的時(shí)間字符串。在實(shí)際開發(fā)中，我們可以將一些通用的方法抽離出來，放在這樣的公共工具類中，并在其他組件中引用。

通過上述例子，我們可以看到在Vue項(xiàng)目中新建文件的方式有很多，并且也可以根據(jù)具體情況來選擇適合自己的方式。