vue腳手架搭建/idea執(zhí)行vue項目全過程
更新時間：2024年10月14日 14:24:10 作者：小迷糊and小菜雞
新建目錄并運行命令提示符,通過npm安裝Vue腳手架并查看版本號,接著,使用vue create命令創(chuàng)建Vue項目,選擇所需配置后完成項目創(chuàng)建,創(chuàng)建成功可見Vue文件夾,使用IDEA打開項目,并啟動項目,根據(jù)需求修改初始化界面
1.新建一個新的目錄文件夾
2.運行命令提示符
3.安裝vue腳手架
命令：npm install -g @vue/cli
查看版本號：vue --version
4.搭建vue項目
a.在命令窗口輸入命令 vue create vue
b.選擇最后一個
c.選擇Babel和Router兩項（按空格鍵選擇/取消選擇，回車鍵：確認(rèn)）
d.選2.X
e.
f.
g.選擇不保存
h.
i.輸入提示的運行命令
j.運行成功后顯示
5.創(chuàng)建成功后可在文件夾中查看到vue文件夾
6.用idea打開vue項目
7.在idea啟動項目
啟動命令
- cd vue
- npm run serve //重啟vue
成功顯示
每個vue必須都要有一個根節(jié)點的div
8.修改初始化vue界面（根據(jù)需要操作）
在src文件夾中新建assets文件目錄
*{
box-sizing: border-box;
}
body{
color: #333;
font-size: 14px;
margin: 0;
padding: 0;
}router文件夾下的index.js文件
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default routermian.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import '@/assets/css/global.css'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')view文件夾下的HomeView.vue
<template>
<div >
主頁
</div>
</template>
<script>
export default {
name: 'HomeView',
}
</script>vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
//修改端口號
/*devServer:{
port:7000
},*/
//修改標(biāo)題
chainWebpack:config => {
config.plugin('html')
.tap(args => {
args[0].title ="huhu";
return args;
})
}
})總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了從0搭建vue-cli4腳手架，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
使用Webpack 搭建 Vue3 開發(fā)環(huán)境過程詳解
這篇文章主要介紹了使用Webpack 搭建 Vue3 開發(fā)環(huán)境過程詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
實際開發(fā)過程中,我們經(jīng)常遇見需要上傳文件圖片功能,可以封裝一個全局組件來調(diào)用,這篇文章給大家介紹vue使用input封裝上傳文件圖片全局組件,感興趣的朋友跟隨小編一起看看吧2023-11-11
這篇文章給大家介紹了Vue.js項目部署到服務(wù)器的詳細(xì)步驟，既然是部署到服務(wù)器，肯定是需要一個云的。具體思路步驟大家可以參考下本文2017-07-07
這篇文章主要介紹了vue前端實現(xiàn)驗證碼登錄功能,登錄時圖形驗證通過三種方法結(jié)合實例代碼給大家講解的非常詳細(xì), 通過實例代碼介紹了vue登錄時圖形驗證碼功能的實現(xiàn),感興趣的朋友一起看看吧2023-12-12
vue3+vite+ts使用require.context問題
這篇文章主要介紹了vue3+vite+ts使用require.context問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
在vue中使用cookie記住用戶上次選擇的實例(本次例子中為下拉框)
這篇文章主要介紹了在vue中使用cookie記住用戶上次選擇的實例(本次例子中為下拉框)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了解決vue $http的get和post請求跨域問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-06-06
這篇文章主要介紹了vue的nextTick的使用,本文從源碼出發(fā)給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
這篇文章主要介紹了vue-admin如何實現(xiàn)動態(tài)路由問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07