Vue項目構建

什麼是vue.js

Vue (讀音 /vjuː/，相似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不一樣的是，Vue 被設計爲能夠自底向上逐層應用。Vue 的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合。另外一方面，當與現代化的工具鏈以及各類支持類庫結合使用時，Vue 也徹底可以爲複雜的單頁應用提供驅動。

怎麼構建一個vue應用程序

npm(模塊管理器)

• node默認的模塊管理器，是一個命令行下的軟件，用來管理和安裝Node模塊(path,fs,http等)
• npm 不須要獨立安裝，在安裝Node的時候，會連帶一塊兒安裝npm,可是,Node附帶的npm可能不是最新的版本，最好用如下命令，更新到最新版本

npm install npm@latest -g

上面的命令中,@latest表示最新版本,-g 表示全局安裝。因此命令的主幹是 npm install npm ，也就是使用npm 安裝本身，由於npm自己與Node的其它模塊沒有區別，而後能夠運行下面命令查看查看各類信息

npm help   // 查看npm 命令列表

npm -l   // 查看各個命令的簡單用法

npm -v   // 查看npm的版本

npm init  //  用來初始化生成一個新的package.json文件,它會向用戶提一系列問題，
          //若是你以爲不須要修改默認配置，一路回車就能夠了

• 咱們能夠發佈個本身的npm包，給別人使用，npm社區
• npm中文文檔 npm中文文檔
• Node官網 Node官網
• 安裝Node，node安裝包下載下來，直接安裝就行 下載Node

vue-cli3.x(vue.js的腳手架工具)

Vue CLI 致力於將 Vue 生態中的工具基礎標準化。它確保了各類構建工具可以基於智能的默認配置便可平穩銜接，這樣你能夠專一在撰寫應用上，而沒必要花好幾天去糾結配置的問題。與此同時，它也爲每一個工具提供了調整配置的靈活性

• 安裝Vue-cli

npm install -g @vue/cli     // 安裝

vue -v    // 查看vue 版本

• 快速原型開發

咱們可使用 vue serve 和 vue build 命令 對單個*.vue 文件進行快速原型開發
vue serve

Usage: serve [options] [entry]

在開發環境模式下零配置爲 .js 或 .vue 文件啓動一個服務器
Options:
  -o, --open  打開瀏覽器
  -c, --copy  將本地 URL 複製到剪切板
  -h, --help  輸出用法信息

你所須要的僅僅是一個 App.vue 文件：

<template>
  <h1>Hello!</h1>
</template>

而後在這個 App.vue 文件所在的目錄下運行：

vue serve

vue serve 使用了和 vue create 建立的項目相同的默認設置 (webpack、Babel、PostCSS 和 ESLint)。它會在當前目錄自動推導入口文件——入口能夠是 main.js、index.js、App.vue 或 app.vue 中的一個。你也能夠顯式地指定入口文件：

vue serve MyComponent.vue

若是須要，你還能夠提供一個 index.html、package.json、安裝並使用本地依賴、甚至經過相應的配置文件配置 Babel、PostCSS 和 ESLint。
vue build

Usage: build [options] [entry]
在生產環境模式下零配置構建一個 .js 或 .vue 文件
Options:
  -t, --target <target>  構建目標 (app | lib | wc | wc-async, 默認值：app)
  -n, --name <name>      庫的名字或 Web Components 組件的名字 (默認值：入口文件名)
  -d, --dest <dir>       輸出目錄 (默認值：dist)
  -h, --help             輸出用法信息

你也可使用 vue build 將目標文件構建成一個生產環境的包並用來部署：

vue build MyComponent.vue

建立vue項目

• 經過圖形界面建立：

vue  ui

在瀏覽器會打開一個建立項目的圖形化界面，在這裏能夠過界面操做建立一個新的或導入一個項目，界面以下:

• 經過指令建立

vue create vue-test    // (vue-test就是項目名)

在終端輸入命令後，終端會出現一些選擇項，咱們能夠選着項目須要的特性，如Babel編譯，Vue路由，Vue狀態管理(Vuex),CSS預處理器，代碼檢測和格式化，以及單元測試等

選擇須要的特性:

配置完成後等待Vue-cli完成初始化,vue-cli初始化完成後，根據提示，進入到vue-test項目中，並啓動項目

cd vue-test   // 進入項目

npm run serve   // 運行項目

項目結構

編譯器 : 推薦使用vscode,由於他有不少強大的插件，如:

• Vetur : 格式化代碼、高亮、代碼格式檢測、自帶Emment、括號自動補全
• Vue 2 Snippets： 簡短縮寫
• Auto Close Tag
• Path Intellisense 自動路勁補全
• JavaScript(ES6) code snippets —— ES6語法智能提示以及快速輸入，除js外還支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各類包含js代碼文件的時間

代碼規範：

1.組件按需引入
2.使用 PascalCase(首字母大寫命名)風格 命名組件。

Vue.component('MyComponentName', { /* ... */ })

<my-component-name></my-component-name>

更多規範 :
vue代碼規範