Mac安裝Vue環境

一 .安裝最新版本步驟

1.vue依託nodejs，因此首先要安裝nodejs

命令：node -v 查看是否安裝了nodejs （有版本號即成功）
命令：npm -v 查看是否安裝了npm (有版本號即成功)
說明：npm是node的包管理工具，默認安裝完node以後，npm會自動安裝上的。

2.安裝Vue

  說明：vue依託nodejs，vue只是node萬千包中的一個。

  1.先查看電腦裏有沒有安裝vue:

          命令：vue -V   //注意V大寫，若提示 command not found 則進行下一步；若提示版本號爲：2.9.6 ，則須要卸載這一版本

  ps:不少人用npm install vue-cli -g 命令，安裝的都是2.9.6版本，最新的版本安裝命令是「npm install -g @vue/cli」；另，3.0以上版本集成了圖形界面，因此放棄2.9.6吧

       卸載2.9.6等舊版本的命令：sudo npm uninstall vue-cli -g

    2.新版vue腳手架安裝命令：sudo npm install -g @vue/cli

        前面加sudo 是獲取系統的權限，以後須要輸入密碼，不加sudo可能由於權限的問題安裝失敗。

    3.若是安裝vue出現一些警告和錯誤，別管他，清除一下緩存就行

         清除緩存的命令：npm cache clean --force

         清除緩存後，用vue -V 命令查看版本，2019.05.11安裝的版本是3.7.0

3.建立新項目

cd 本地文件夾

sudo vue create test-demo  注意，項目名稱不能有大寫字母和漢字

而後用箭頭選擇默認的便可

 

二 .安裝版本爲2的步驟

由於學習過程當中的視頻仍是2的版本，須要配置路由方面，這裏又找了一下安裝2的版本的步驟，記得命令前加sudo獲取權限

npm uninstall -g @vue/cli //卸載3，
npm install -g vue-cli //安裝2 
注意中間若是問是否須要路由，項目中須要的記得輸入Y， 
建立一個基於webpack模板的新項目 
vue init webpack my-project 安裝依賴包 3. cd my-project 4. cnpm install 5. npm run dev

新建項目過程當中若是發現卡死不動了，緣由多是沒有安裝webpack，

• 解決方法：執行三個命令檢查環境

1. node -v
2. vue -v? (沒有顯示版本，npm i vue-cli -g)
3. webpack-v(須要從新安裝,npm install webpack -g)

• 三個條件知足時，運行vue init webpack demo（demo項目名）
• 安裝webpack時若是報錯 Unexpected end of JSON input while parsing near '…"，用如下步驟解決：
• 解決辦法：
  （1）npm install --registry=https://registry.npm.taobao.org --loglevel=silly
  （2） npm cache clean --force
  （3） npm install

4.啓動項目

cd 項目文件夾

npm run serve

用以上命令，啓動後，會給你一個本地url地址，和一個網絡地址，打開 http://localhost:8080/便可見到效果

5.vue的命令

init  從模板生成新項目

list   列出可用的官方模板

build  建立新項目的原型

create 建立（警告：僅用於v3以上版本）

vue ui  啓動腳手架圖形界面（3.0以上版本）

6.經常使用命令

npm install 安裝依賴

npm run dev 或 npm run serve 啓動項目

7.vscode操做：

 

 Ctrl+shift+Y呼出vscode控制檯

    vue命令：

        vue ui  啓動腳手架圖形界面

        vue create myDemo 建立新項目

        npm install 添加包依賴 

        npm run build  編譯

        npm run serve 啓動項目

    更新保存代碼的方式：

        修改代碼後，點擊Save All 按鈕，或者cmd+option+S保存更新；

        也可設置Auto Save的模式，或者定義自動時間更新

    安裝插件的方式：

        設置-Extensions 搜索插件名稱安裝

        設置各個插件的方法：設置-Setting-Extensions 點擊某個插件進行設置

        中文插件安裝：

            搜索 @category:"language packs" 選擇中文簡體安裝

            cmd+shift+p 出搜索框，搜索並點擊 "Configure Display Language" 選擇 zh-cn ，而後自動重啓軟件

        Vue 2 Snippets：vue2.x版本的代碼片斷提示

        Vetur：格式化代碼

        Beautify css/sass/scss/less : 美化界面的

 

原文連接：https://www.jianshu.com/p/167aaf13346c