Vue學習（一）：Vue的安裝及使用Vue Cli快速生成新項目的腳手架

前言

Vue是一套用於構建用戶界面的漸進式框架，是隻針對前端的框架，它能夠幫助我們快速地構造前端頁面。利用Vue框架和其他後端框架比如express，能迅速構建單頁應用。詳細信息請查看Vue的官方文檔https://cn.vuejs.org/v2/guide/

Vue的安裝

Vue的安裝方法有很多，我是用的方法是直接用<script>標籤引用。

首先前往Vue的github倉庫https://github.com/vuejs/vue，把整個代碼倉庫下載到本地，然後只需要在項目中引用dist文件夾下的vue.js即可。

更多的安裝方法詳看官方文檔https://cn.vuejs.org/v2/guide/installation.html

Vue Cli的安裝

使用Vue Cli快速生成新項目的腳手架，目前的版本爲3.x，官方文檔爲https://cli.vuejs.org/zh/guide/。Vue Cli新版與舊版的用法有些不同，爲了緊跟潮流，這裏使用3.x的版本，並且要求Node.js版本至少爲8.9。

安裝Vue Cli之前，強烈建議安裝淘寶的cnpm，用cnpm代替npm進行各種依賴包的安裝，不僅速度更快，而且能避免很多安裝時的錯誤。我在用npm安裝Vue Cli時，就遇到了不少錯誤，使用了cnpm後，就沒問題了。要安裝cnpm，就在命令行中輸入並執行npm install -g cnpm --registry=https://registry.npm.taobao.org。

如果之前安裝過舊版的Vue Cli，必須先執行命令npm uninstall vue-cli -g卸載。Vue Cli安裝過程比較簡單，只需要在命令行中輸入並執行cnpm install -g @vue/cli即可。

Vue Cli的使用

首先在命令行中輸入並執行vue create 文件夾名，比如我輸入了vue create vue-client，結果如下圖：

在這裏，不要選擇默認選項，而是選擇Manually select features，並且把Router和vuex選上，這兩個插件能幫助我們快速地開發項目。結果如下圖：

接下來，關於Router，默認是hash模式，這裏我們使用history模式。注意，使用history模式需要對後端代碼進行部分修改，才能使得前端頁面不會出現404問題，修改方法如下https://router.vuejs.org/zh/guide/essentials/history-mode.html。如果自己的項目是純前端項目，或自己無法修改服務端代碼，則必須選默認hash模式。如下圖所示：

至於後面的一些選項根據自己實際情況選擇即可，最後一個項目就創建好了，項目結構如下：

|-- vue-client
    |-- .browserslistrc
    |-- .editorconfig
    |-- .eslintrc.js
    |-- .gitignore
    |-- babel.config.js
    |-- package-lock.json
    |-- package.json
    |-- postcss.config.js
    |-- README.md
    |-- public
    |   |-- favicon.ico
    |   |-- index.html
    |-- src
        |-- App.vue
        |-- main.js
        |-- router.js
        |-- store.js
        |-- assets
        |   |-- logo.png
        |-- components
        |   |-- HelloWorld.vue
        |-- views
            |-- About.vue
            |-- Home.vue

進入剛創建好的文件夾，執行npm run serve，然後再瀏覽器輸入http://localhost:8080/即可看到頁面內容。

使用Vue Cli創建web前端頁面後，就不需要另外引入vue.js庫文件了，因爲Vue Cli自動爲我們引入了所需的庫。