快捷導航

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兩項（按空格鍵選擇/取消選擇，回車鍵：確認）

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 router

mian.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
  },*/
 
  //修改標題
  chainWebpack:config => {
    config.plugin('html')
        .tap(args => {
          args[0].title ="huhu";
          return args;
        })
  }
 
 
})