Vue 項目嚐鮮（一） 搭建項目

前言 vue 是如今很火的一個前端開發框架，它容易學上手快，基本已經成爲一名前端工程師的標配了。可是咱們若是一開始只是看官方文檔的話，有時候會感受有點虛，這個時候就要搞整個項目來撫慰一下本身，證實一下本身。此次我就手把手教你們作本身的 vue 前端項目啦。

注： 搭項目只是爲了你們內心有個底，要想好好學 vue，仍是得老老實實看文檔。

配環境

建項目以前咱們須要配好下面幾個環境

1. Node & Npm

這個直接去 Node 官網 下載一個安裝包，而後直接安裝就好了。而後咱們打開一下咱們的控制檯，輸入下面的命令來判斷咱們環境是否搭好了。若是不想按照默認安裝的話，能夠看我以前的教程

// 查看 node 版本
node -v // v10.15.3 我這邊是這個版本

// 查看 npm 版本（這個在裝 node 的時候會一塊兒裝的）
npm -v // 6.4.1

因爲網絡問題，咱們後面用 npm 安裝依賴的時候，可能會很慢（如今就還好，不過仍是裝一下吧），因此咱們能夠使用淘寶的鏡像，安裝一個 cnpm，而後用它替代 npm 裝依賴

npm install -g cnpm --registry=https://registry.npm.taobao.org

1. 全局 vue-cli 腳手架工具

這個就簡單了，咱們能夠直接用 npm 來安裝，直接在控制檯輸入下面指令全局安裝腳手架工具

npm install -g @vue/cli

接着咱們在控制檯輸入下面指令查看腳手架工具的版本順便看看本身環境配成功沒。

vue -V // 2.9.6

好了，到這裏咱們的環境就配好了。

搭建項目

環境配好以後，咱們就能夠搭建咱們的 vue 項目了。咱們到咱們要建立項目的目錄下，打開控制檯輸入下面的指令

vue init webpack vue-demo // vue-demo 是項目名，按照本身需求來寫

它會下載模板，而後讓咱們進行選擇配置咱們的想，下面咱們一條一條過控制檯的指令哈

？Project name（vue-demo）

這個是肯定項目名稱的，你能夠從新輸入項目名，可是通常回車 yes 過就行了。來，下一個

? Project description(A Vue.js Project)

這個是用來描述項目的，也不用管了直接回車，next

? Author <XXXXX>

這個是肯定項目做者的，回車回車，

? Vue build (Use arrow keys)
❯ Runtime + Compiler: recommended for most users
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specif
ic HTML) are ONLY allowed in .vue files - render functions are required else
where

這個看起來不少，是關於打包構建，可是咱們仍是直接回車選默認首個吧。

? Install vue-router? (Y/n)

要不要配個 vue-router 啊，要啦，回車 Yes

? Use ESLint to lint your code? (Y/n)

看到這個不要回車先，這個先說明一下 ESLint 是一個用來檢測 JS 語法的插件，之後建議仍是用它，可是第一次仍是不要用了，否則你會發現你寫啥它都報語法錯誤，因此這邊，咱們輸入一個 n， 而後回車

? Set up unit tests (Y/n)

這裏咱們不須要單元測試，n，回車

? Setup e2e tests with Nightwatch? (Y/n)

咱們也用不到端對端測試，n，回車

? Should we run `npm install` for you after the project has been created? (r
ecommended) (Use arrow keys)
❯ Yes, use NPM
  Yes, use Yarn
  No, I will handle that myself

最後啦，這個就是要問你咋安裝依賴了，咱們就先不安裝依賴了，選到第三個，回車。

最後一對提示詞出現，項目搭建成功。

運行項目

運行項目前，咱們要安裝項目依賴。咱們進去項目文件夾，控制檯輸入

npm install

安裝依賴，輸入很慢的話，下次要裝依賴的時候就用

cnpm install

依賴安裝完成以後,咱們能夠執行

npm run dev

把項目跑起來了，這個可能須要幾秒中，

DONE  Compiled successfully in 8632ms                              10:09:12

 I  Your application is running here: http://localhost:8080

看到這個，咱們就能夠在瀏覽器打開 8080 端口查看。

看到上面的頁面？好的，項目搭建成功。成功獲取局部勝利。