零基礎 Vue 開發環境搭建 打開運行Vue項目 如何運行vue項目

【相關推薦】IntellIJ IDEA 配置 Vue 支持 打開Vue項目

　　所需文件

　　node.js環境（npm包管理器）(node-v8.11.3-x64.msi)(npmV5.6.0)

　　cnpm npm的淘寶鏡像

　　vue-cli 構建工具(腳手架)

1、安裝node

　　安裝完node，就自動在path裏增長環境變量，可是爲了之後的本地部署項目，咱們須要找到node.js的安裝根目錄，在當中新建「node_global」和"node_cache"兩個文件夾。

一、啓動CMD依次執行如下兩條命令
　　npm config set prefix "F:\set-soft\nodejs\node_global"
　　npm config set cache "F:\set-soft\nodejs\node_cache"

　　後續用命令npm install -g XXX安裝，模塊就在D:\nodejs\node_global\node_modules裏。

二、設置環境變量：

　　（1）修改用戶變量PATH：把"D:\nodejs\node_global"加到後面。

　　（2）新增系統變量NODE_PATH：設置成「D:\nodejs\node_global\node_modules」。

　　NODE_PATH = F:\set-soft\Node\nodejs
　　PATH = %NODE_PATH%\;%NODE_PATH%\node_modules;%NODE_PATH%\node_global;

　　這樣就能夠把後面全局安裝的裝到global裏而且能夠直接用命令使用。

2、安裝vue

　　1.安裝cnpm

　　　　說明：因爲許多npm包都在國外，用淘寶的鏡像服務器，對依賴的module進行安裝。

　　　　參考網址爲：http://npm.taobao.org/

　　　　安裝命令爲：npm install -g cnpm --registry=https://registry.npm.taobao.org

　　2.用cnpm安裝vue

　　　　安裝命令爲：cnpm install vue -g

　　3.安裝vue命令行工具

　　　　安裝命令爲：cnpm install vue-cli -g

3、項目開發

　　（1）建立工程

　　　　1. cd命令進入將要新建工程的目錄，如「E:\nodejs」

　　　　2. 用命令"vue init webpack mytest"建立一個基於 webpack 模板的新項目，工程名爲"mytest"。

　　（2）安裝工程依賴 （打開別人項目第一步，）

　　　　1. cd命令進入工程目錄

　　　　2. 用命令"cnpm install」安裝該工程依賴的模塊，這些模塊將被安裝在：mytest\node_module目錄下，node_module文件夾會被新建，並且根據package.json的配置下載該項目的modules。

　　（3）運行項目

　　　　1. cd命令進入工程目錄

　　　　2. 用命令「cnpm run dev」運行項目。

　　（4）打包項目

　　　　 cnpm run build

 

　　參考文獻：如何運行vue項目