vue的安裝和使用

要使用vue首先得安裝node.js和工具npm

1.安裝node.js

在官網上去下載：https://nodejs.org/en/download/

安裝完之后使用node -v 查看是否出現版本號有就是安裝成功了

如果提示node不是內部命令那么就是需要配置環境變量

Windows環境下

1.設置環境變量：右鍵“我的電腦”-屬性-高級系統設置-高級-環境變量，如下圖：

然后再下面一欄系統變量下選擇新建，然后新建一個NODE_PATH，並設置安裝的地址，我安裝的時候僅僅是把C盤改為了D盤，所以是D:\Program Files\nodejs     ，地址僅供參考，如果你安裝在了別的位置的話，這里的地址就不一樣。接着編輯Path，在變量值的尾部添加   ;%NODE_PATH%然后測試一下，輸入node -v  ，查看node版本；或者輸入 npm -v

 

如果是linux的環境下，我的是ubuntu系統

1. 輸入命令：vim /etc/profile（如果沒有安裝vim，可根據提示安裝，vim比vi好用多了），在末尾添加以下三行：

   export NODE_HOME=/opt/node

   export PATH=$PATH:$NODE_HOME/bin 

   export NODE_PATH=$NODE_HOME/lib/node_modules

   之后按Esc鍵，並輸入“：wq!”命令保存配置並推出

2. 4

   在命令行輸入：source /etc/profile，然后在命令行輸入：node -v，返回版本信息v5.1.0，說明環境變量配置就生效了；但，你會發現進入root賬戶，改配置並沒有生效

3. 5

   在命令行輸入：vim /root/.bashrc,並在文件末尾加入一行source etc/profile命令，保存。這樣就大功告成了。

 

2. 安裝淘寶NPM鏡像

由於在國內npm的安裝速度太慢，因此可以使用淘寶鏡像及其命令cnpm來安裝各種包。

安裝npm淘寶鏡像：

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

安裝完成后，后面就可以使用cnpm命令來安裝npm包了。

cnpm install {package name}

 

3.安裝vue-cli

vue-cli是一種全局腳手架用於幫助搭建所需的模板框架，同理在cmd中輸入命令:npm install -g vue-cli。

在這一段代碼中-g是為了全局使用的意思。與cnpm樣，安裝完成后會顯示一長串的文件，輸入 vue -v

可以查看vue版本。此時，環境已經基本搭建成功。

4.測試，創建第一個Vue.js項目

在命令行中輸入：vue init webpack my-first-demo(項目文件夾名)。

再按照提示輸入y或者n或者直接enter鍵

然后根據提示進入項目目錄

輸入 npm run dev 就能啟動項目了