Vue框架安装入门
根據MDN網站學習記錄筆記
Vue 入門
- 一、Vue.js安裝
- 二、初始化一個新項目
- 三、項目結構
- 四、.vue文件
- 五、本地運行程序
- 六、做一些改動
- 七、Vue項目的運行
Vue.js是一款漸進式JavaScript框架。具有體積小、更高的運行效率（基于虛擬dom）、實現雙向數據綁定、生態豐富、學習成本低等特點。
一、Vue.js安裝
Vue.js的使用方法：
一、直接用<script>標簽引入
下載vue.js將其放在項目內，用<script>標簽將vue.js引入html的<head>標簽內；或者是通過CDN的方式引入Vue.js。
二、使用命令行工具CLI搭建腳手架
腳手架（scaffolding）指的是創建項目時，自動完成的創建初始文件等初始化工作。 往往是每次新建工程都要進行的重復性工作。
首先需要安裝NPM和Node.js，然后在終端執行下列命令安裝CLI
npm install --global @vue/cli安裝之后，要初始化一個新項目，可以在要創建項目的目錄中打開一個終端，并運行
vue create <project-name>CLI將會提供目配置列表。按照自己的需求，配置TypeScript,linting,vue-router,testing…
二、初始化一個新項目
三、項目結構
根據創建項目時所選配置項的不同，預設目錄可能存在一定區別。
- .eslintrc.js: 這個是 eslint 的配置文件，可以通過它來管理校驗規則。
- babel.config.js: 這個是 Babel 的配置文件，可以在開發中使用 JavaScript 的新特性，并且將其轉換為在生產環境中可以跨瀏覽器運行的舊語法代碼。
- .browserslistrc: 這個是 Browserslist 的配置文件，可以通過它來控制需要對哪些瀏覽器進行支持和優化。
- public: 這個目錄包含一些在 Webpack 編譯過程中沒有加工處理過的文件（有一個例外：index.html 會有一些處理）。
favicon.ico: 這個是項目的圖標，當前就是一個 Vue 的 logo。 index.html: 這是應用的模板文件，用于管理Vue應用之外的靜態HTML文件【但不是最終展示模板】，Vue 應用會通過這個 HTML 頁面來運行，也可以通過 lodash 這種模板語法在這個文件里插值。 - src: 這個是 Vue 應用的核心代碼目錄
main.js：這是應用的入口文件。初始化 Vue 應用并且制定將應用掛載到index.html文件中的某個 HTML 元素上
App.vue： Vue 應用的根節點組件
components：存放自定義組件的目錄
assets：存放像 CSS 、圖片這種靜態資源，可以用 webpack 來操作和處理。
四、.vue文件
組件可以把一個很大的應用程序拆分為獨立創建和管理的不相關區塊，然后彼此按需傳遞數據，更容易的理解和測試。
Vue 使用單文件組件，把模板、相關腳本和 CSS 一起整合放在 .vue 結尾的一個單文件中。
App.vue
<template><div id="app"><img alt="Vue logo" src="./assets/logo.png"><HelloWorld msg="Welcome to Your Vue.js App"/></div> </template><script> import HelloWorld from './components/HelloWorld.vue'export default {name: 'App',components: {HelloWorld} } </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>由三部分組成：
- <template>：組件模板，包含了所有的標記結構和組件的展示邏輯。
- <script>：腳本內容，包含組件中所有的非顯示邏輯，需要默認導出一個 JS 對象。在構建階段這個對象會被處理和轉換成為一個有 render() 函數的 Vue 組件。
- <style>：包含樣式相關的內容
五、本地運行程序
Vue CLI 帶有內置的開發服務器，CLI 會以 npm 腳本的形式將serve命令添加到項目的package.json 文件中
在終端運行npm run serve
在本地打開 http://localhost:8080/
六、做一些改動
打開App.vue，在template部分刪除img元素
<img alt="Vue logo" src="./assets/logo.png">首先刪除下面一行代碼，發現渲染好的頁面因注冊的組件未被使用而報錯
<HelloWorld msg="Welcome to Your Vue.js App"/>刪除引入和注冊組件的代碼，渲染好的頁面僅剩一個空頁面
import HelloWorld from './components/HelloWorld.vue' components: {HelloWorld }在<div id="app"> 中新增一個 <h1> 標簽，并將標題文案設為 “To-Do List”
七、Vue項目的運行
參考自如何運行vue項目（詳細步驟）
總結
- 上一篇： 怎么避开代还系统开发的套路？
- 下一篇： html5倒计时秒杀怎么做,vue 设