前言
近些年前端開發快速發展，現在學習前端已經不像以前那樣僅僅學習一個語法就可以了，它已經是一門編程技術了，它們有自己獨立的類似Main函數的入口，有像MVC一樣規范好的層次結構，有自己的開發工具可以發布打包程序，甚至還可以獨立連接數據庫，當然了，優點與缺點共存，不能向其他語言那樣斷點調試導致了，它的脈絡更難被捕捉，猶如遠古時代的代碼開發一樣，但它還是已經可以稱為一門編程技術了，所以學習一門前端開發，已經是一件非常有意義的事兒了。
新建項目
首先安裝Nodejs，然后我們一起學習使用Vue。
安裝Nodejs參考：【在Windows下學習Nodejs、Npm和VUE】
Vue是一個前端框架，安裝了Nodejs后，可以使用Npm命令直接下載vue。
打開cmd窗口，依次輸入如下命令：
npm i vue -g npm i vue-cli -g
注：輸入【npm i vue -g】下載vue時，盡量使用-g，因為vue的文件中有一些文件是可以vue開頭的命令行的，因為-g是下載到環境變量配置的Path地址，所以如果下載到這里，那么vue開頭的命令就可以在cmd窗口中直接使用了，不然還需要重新配置環境變量，添加當前下載目錄。
npm i module_name -S 即 npm install module_name --save 寫入dependencies，發布到生產環境 npm i module_name -D 即 npm install module_name --save-dev 寫入devDependencies，發布到開發環境 npm i module_name -g 即 global全局安裝(命令行使用) npm i module_name 即 本地安裝(將安裝包放在 ./node_modules 下)
下載完Vue后，我們新建一個文件夾，然后打開CMD跳轉該目錄，如【cd/d F:\Nodejs2】，然后使用vue開頭的命令創建一個項目，在cmd窗口輸入命令如下：
vue init webpack my-project
輸入完命令后，會提示我們配置項目信息，可以一直回車使用默認配置，然后等待項目創建完成。
該命令創建的項目是VueCli2.0模板的項目，VueCli3.0以上使用vue create xxx(名稱)）。
vue create my-project
卸載vuecli2安裝vuecli3及以上
npm uninstall vue-cli -g 卸載舊版本 npm cache clean --force 清除緩存 npm install -g @vue/cli@3 安裝Vue CLI 3 npm install -g @vue/cli 安裝Vue CLI 4 npm -V npm update
注：輸入vue init webpack my-project后，不要切換窗口，一直回車，就可以創建成了，如果切換窗口了，切換回當前cmd窗口后，回車有時候無法直接輸入，需要操作下才能輸入，比如先按一下個上下左右鍵。
項目創建完成后，得到如下界面內容。
項目創建完成，我們會在目錄下多了一個文件夾—my-project。
然后我們在通過CMD命令在跳轉到項目目錄【cd/d F:\Nodejs2\my-project】，然后運行npm install，進行初始化。
npm install
最后，我們再輸入命令npm run dev，得到窗體如下：
然后打開瀏覽器，輸入http://localhost:8080，vue項目運行成功，如下圖：
注：vue自帶了一個類似server.js的配置，所以運行npm run dev命令后，會啟動一個服務器。
學習項目
通過VisualStudioCode將新建的項目打開。
剛剛安裝的VSCode需要禁用JS-CS-HTML Formatter插件，不然保存代碼時會自動格式化了，然后html代碼全亂了
禁用方法：ctrl+shift+X調出擴展，搜索JS-CS-HTML Formatter ，然后禁用，然后重啟。
新建項目結構如下圖：
結構描述如下表：
| 文件夾/文件 | 描述 |
|---|---|
| build | 項目構建(webpack)相關代碼 |
| config | 配置目錄，包括端口號等。我們初學可以使用默認的。 |
| node_modules | npm 加載的項目依賴模塊 |
| src | 這里是我們要開發的目錄，基本上要做的事情都在這個目錄里。里面包含了幾個目錄及文件。 |
| static | 靜態資源目錄，如圖片、字體等。 |
| test | 初始測試目錄，可刪除 |
| .其他文件 | 這些是一些配置文件，包括語法配置，git配置等。 |
| index.html | 這是一個模板文件，同時又是Main.js的展示頁面，也可以理解為Index.html的ViewModel是Main.js，Main.js是項目啟動的入口。項目啟動時Main.js會讀取該頁面，然后把當前顯示的vue文件渲染進該頁面。類似於MVC中的layout.cshtml文件的作用。 |
| package.json | 項目配置文件。 |
| README.md | 項目的說明文檔，markdown 格式 |
src核心
src是我們代碼編寫的核心文件，其內容如下：
assets: 放置一些圖片，如logo等。
components: 目錄里面放了一個組件文件，可以不用。
App.vue: 項目入口文件，我們也可以直接將組件寫這里，而不使用components 目錄。
main.js: 項目的核心文件。
代碼詳解
Main.js
Main.js是項目的入口，類似其他語言的Main函數，代碼如下：
import Vue from 'vue'//引入vue.js文件
import App from './App'//引入當前目錄下的App.vue文件，【./】指當前目錄，【.vue】被隱藏了
import router from './router'//引入當前目錄下router文件夾下的Index.js文件
Vue.config.productionTip = false//屏蔽調試時的一些console日志內容
/* eslint-disable no-new */
new Vue({
el: '#app',
router,//指定路由的js對象
components: { App },//加載上方導入到組件。
template: '<App/>'//選擇一個組件去替換index.html 中的<div id="app"></div>。這里使用我們components導入的App組件，相當於指定初始化時的顯示組件，Vue組件注冊后可以使用<tagName></tagName>的模式來使用組件。可以參考—https://www.runoob.com/vue2/vue-component.html
})
import
import類似其他語言的引入命名空間或引入包，這里主要是用於引入js文件和vue文件。
如果引入的是js文件，則鼠標放到引用上，會顯示具體引用路徑，如下圖：
new Vue
new Vue這一段是創建一個js的Vue對象，該對象的構造函數，接受一個對象，這里傳了一個匿名對象，我們可以看到，new Vue后的圓括號【(】里，跟了一對大括號【{】，然后這個對象里，有幾個屬性，需要初始化。
el：估計是element的縮寫，表示Vue綁定的元素。
router：router是我們上面引入的router文件夾下的Index.js文件，打開文件，代碼如下：
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
可以看到，代碼中開放了一個默認的Router類型的對象，這個對象是vue-router中定義的，用於定義頁面跳轉路由，這里定義了路徑HelloWorld對應導入/components/HelloWorld.vue文件。
ps:export類似於其他語言的public，就是公開該js文件的某個對象或函數，export default就是默認公開的那一個，這樣其他js文件使用import導入該js文件時，就可以省略指定對象這幾個代碼，這種是一個很原始的程序設計風格，大家還需要適應。
App.Vue
App.Vue是Main.js默認加載的模塊，其代碼如下：
<template>
<div id="app">
<h2>Kiba518</h2>
<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>
這里主要是用於配置路由視圖—— <router-view/>，其他的樣式我們可以暫時忽略。
可以看到我們把路由視圖(router-view)配置在了一個div中，並且還放在了一個H2下面，這樣，我們的這個H2標簽就永遠會在路由視圖上面了。
運行項目
我們對App.Vue和HelloWorld.vue進行了簡單修改，然后不用重啟，不用編譯，只需要重新切換回剛剛的那個網頁——http://localhost:8080。
如上圖所示，我們得到了修改頁面。
----------------------------------------------------------------------------------------------------
注：此文章為原創，任何形式的轉載都請聯系作者獲得授權並注明出處！
若您覺得這篇文章還不錯，請點擊下方的【推薦】，非常感謝！
https://www.cnblogs.com/kiba/p/13673631.html
