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