vue學習新手入門 ——VScode開發第一個vue項目

vue前端框架使用越來越多，而vscode作爲前端開發IDE環境也使用越來越普遍，本文結合vscode介紹vue開發第一個vue項目。

開發vue需要依賴於nodejs，本博客有介紹nodejs的安裝，本文就不再做介紹。

一、安裝vue及依賴

執行npm命令安裝webpack

npm install webpack -g

再安裝vue

npm install vue vue-cli -g

二、創建vue項目

創建vue項目必須能夠訪問互聯網，因爲創建vue項目的過程中需要下載vue的模板。

vue init webpack vue001

等待下載vue的模板，然後會等等用戶做一些選擇，全部回車即可，然後開始下載項目的依賴，等待項目創建完成。

cd vue001

npm run dev

打開瀏覽器， 輸入 http://localhost:8080 即可訪問剛剛創建的vue001項目的界面了，如下圖所示

``

三、安裝vscode

vscode現在幾乎是開放vue的標配IDE開發環境，是微軟貢獻的免費試用的開源IDE，下載地址 https://code.visualstudio.com/ ，下載後直接安裝即可（建議開發環境下的任何路徑都不要帶空格）。

修改Tab Size 爲 2：

菜單 File > Preference > Settings，在User頁籤 將Editor: Tab Size 改爲 2

四、修改項目vue001

啓動vscode，點擊菜單 File > Open Folder… 選擇前面創建的vue001項目的目錄，就在vscode中打開了vue001項目了。

4.1 vue項目的結構

build/ webpack.base.conf.js 文件，是webpack打包的主要配置文件，也是vue項目渲染過程的入口文件。

config/ index.js文件配置了開發環境下npm run dev運行的端口8080，可以修改爲其他端口；這個文件也可以修改proxyTable 配置後端接口的代理。

dist 目錄是vue項目打包產出物的路徑。

node_modules目錄下是依賴包，不需要太關注。

src 目錄是源碼目錄，我們的開發工作大部分都是對這個目錄下的文件進行修改。其中components 子目錄和router 子目錄是vue項目的兩個核心。

4.2 創建頁面

創建一個頁面包括：新建路由、新建vue頁面

打開 src\router\index.js 文件進行路由編輯：

import Vue from 'vue'
import Router from 'vue-router'
import Hi from '@/components/Hi'  // 這是新加的一行，引入Hi Component, @表示本地文件系統中的源代碼目錄src
 
Vue.use(Router)
 
export default new Router({
  mode: 'history',  // 這行的作用是去掉地址欄中的#
  routes: [
    {
      path: '/',
      name: 'Hi',     // 這是名稱
      component: Hi   // 這是對應component下的Hi.vue文件
    }
  ]
})

注意： 上面的 mode: ‘history’ 是去掉地址欄中的#（見上圖）。但是在項目的正式部署環境下刷新瀏覽器會報404的錯誤，解決此問題需要在 nginx 中添加如下的配置（React項目也需要做同樣的配置）：

location / {
    try_files $uri $uri/ /index.html; 
}

<template>
  <div class='hi'>
    {{message}}
  </div>
</template>
 
<script>
export default {
  data () {
    return {
      message: 'hi, 我的第一個vue程序'
    }
  }
}
</script>
 
<style>
.hi{
  color: blue;
  font-size: 20px;
}
</style>

修改 src\ App.vue 文件，註釋掉css中的margin-top

<template>
  <div id="app">
    <router-view/>
  </div>
</template>
 
<script>
export default {
  name: 'App'
}
</script>
 
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /* margin-top: 60px; */
}
</style>

重新訪問http://localhost:8080 得到如下效果：

原文鏈接：https://blog.csdn.net/bowei026/article/details/91355251