Vue的配置安裝與項目創建

配置

• 需要下載安裝node.js解釋器

• 檢測是否安裝好node.js

  • # 在終端輸入
    node -v
    

• 檢測是否安裝好npm

  • # 在終端輸入
    npm -v
    

下載源配置

• 由於鏡像源在國外，因此npm下載時很可能出現網絡慢或者下載錯誤

• 百度搜索npm淘寶鏡像

  • 淘寶NPM鏡像

• 終端輸入淘寶鏡像

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

  • 以后使用cnpm下載即可

npm 腳手架

安裝

• cnpm install -g @vue/cli
  

• 檢測是否安裝好

  • # 終端輸入
    vue --version
    

使用腳手架創建項目

• vue create 項目名
  
  # 例如：
  vue create my_app
  

• 執行創建命令后會出現以下提示

  • 

  • 這是問你是否使用淘寶鏡像源，輸入y即可

• 再之后出現以下提示：

  • 

  • 上下鍵選擇第二個選項

• 再之后出現以下情況：

  • 

  • 第二個星號選項一定要按空格鍵取消掉，否則在你寫代碼時會有很多格式限制，甚至提示錯誤

• 按回車鍵后，會出現以下情況：

  • 

  • 這是問你是否保存剛才的配置，沒啥情況選擇第一個選項即可

• 再回車之后就會這樣：

  • 

  • 問你是否保存預設作為以后的項目使用，輸入y即可

• 再之后：

  • 

  • 這里給你的預設起個名字，以后再創建項目時直接找這個預設即可，不需再次執行以上繁瑣過程，這里我預設起名為：my

• 回車之后則會自動安裝所需文件,創建環境，完成后的情況：

  • 

• 然后根據提示執行兩行代碼即可

  • 

• 然后項目就運行起來了

  • 

• 最后在瀏覽器中訪問http://localhost:8080/即可看到vue首頁

UI 創建

• 除了命令行創建項目外，還可以使用UI界面點點點的方式創建項目，推薦使用命令行方式
• 執行命令vue ui即可
• 操作方式不多贅述

關於預設

• 之前所設置的預設在下一次創建項目時第三步給你列出來供你選擇，可省略很多步驟
• 創建預設環境后會生成一個 .vuerc 文件，里面記錄你的預設信息，刪除后將不再顯示

關於啟動

啟動語句

• npm run serve
  

• 關於這句啟動命令，其中的serve只是個名字，可在項目中的 package.json 文件中找到並修改

  • "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build"
      },
    

  • 如果將serve改為abcd，則啟動語句為 npm run abcd,其它名字亦可

特例

• 這里有個啟動特例，如果你將 serve 改為了start，則啟動語句為

  • npm start  // 是不是很神奇？
    

附錄：

• Vue 相關開源項目匯總
  • 其中推薦一個vue-element-admin的管理模板