npm搭建vue全過程

如何在Window下安裝node\cnpm，並安裝vue.js，創建項目

參考鏈接：https://blog.csdn.net/Corey_mengxiaodong/article/details/81220305

1.安裝node.js

node.js的官方地址為：https://nodejs.org/en/download/。
根據windows版本后，選擇要下載的安裝包，下載完畢，按照windows一般應用程序，一路next就可以安裝成功，建議不要安裝在系統盤

2.設置global和cache路徑

設置路徑能夠把通過npm安裝的模塊集中在一起，便於管理。
（1）在nodejs的安裝目錄下，新建node_global和node_cache兩個文件夾，如安裝目錄為“D:\nodejs\”
（2）用命令 npm config set prefix "D:\nodejs\node_global" 和 npm config set cache "D:\nodejs\node_cache" 設置global和cache，設置成功后，后續用命令npm install -g XXX安裝模塊，模塊就在D:\nodejs\node_global\node_modules里。
（3）輸入命令 npm config set registry=http://registry.npm.taobao.org     // 配置鏡像站

3.設置環境變量

說明：設置環境變量可以使得住任意目錄下都可以使用cnpm、vue等命令，而不需要輸入全路徑。
（1）修改用戶變量PATH：把"D:\nodejs\node_global"加到后面。
（2）新增系統變量NODE_PATH：設置成“D:\nodejs\node_global\node_modules”。

4.安裝cnpm

說明：由於許多npm包都在國外，用淘寶的鏡像服務器，對依賴的module進行安裝。
參考網址為：http://npm.taobao.org/
安裝命令為：npm install -g cnpm --registry=https://registry.npm.taobao.org

5.安裝vue

安裝命令為：cnpm install vue -g

6.安裝vue命令行工具

cmd命令行中：
安裝命令為：cnpm install vue-cli -g
卸載命令為：npm uninstall vue-cli -g
vue更新版本：
	cnpm install -g @vue/cli
	npm install @vue/cli-init -g

7.查看版本

cmd命令行中：
node -v		// node版本
npm -v		// npm版本
cnpm -v		// cnpm是否正常
npm vue -v	// vue版本
vue -V		// vue-cli版本

8.創建工程

cmd命令行中(切換到指定目錄)：
vue init webpack vue_demo  // 創建一個基於webpack模板的新項目，工程名'vue_demo'
cd vue_demo		// 切換到vue_demo目錄下
cnpm install	// 安裝依賴的模塊
npm run dev		// 運行項目
npm run build 	// 打包，生成靜態文件

9.項目結構

|-- build : webpack 相關的配置文件夾(基本不需要修改)
	|-- dev-server.js : 通過 express 啟動后台服務器
|-- config: webpack 相關的配置文件夾(基本不需要修改)
	|-- index.js: 指定的后台服務的端口號和靜態資源文件夾
|-- node_modules：存放該工程依賴的模塊，而且根據package.json的配置下載該項目的modules。
|-- src : 源碼文件夾
	|-- components: vue 組件及其相關資源文件夾
	|-- App.vue: 應用根主組件
	|-- main.js: 應用入口 js
|-- static: 靜態資源文件夾
|-- .babelrc: babel 的配置文件
|-- .eslintignore: eslint 檢查忽略的配置
|-- .eslintrc.js: eslint 檢查的配置
|-- .gitignore: git 版本管制忽略的配置
|-- index.html: 主頁面文件
|-- package.json: 應用包配置文件
|-- README.md: 應用描述說明的 readme 文件

10.常用node_modules安裝

cmd命令行中：
安裝npm：    //node自帶npm，但不一定是最新的npm
	npm install npm -g
安裝cnpm：
	npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝webpack:
	npm install webpack -g
	npm install webpack-cli -g
	也可以同時：npm install webpack webpack-cli -g
查看版本:
	webpack -v

安裝vue：
	npm install vue -g
安裝vue-cli:
	npm install vue-cli -g
	或者 npm install --global vue-cli
查看vue-cli版本:
	vue -V
安裝vue-router：
	npm install vue-router -g
    
vue-cli2.x升級vue-cli3
卸載：npm uninstall vue-cli -g 或 yarn global remove vue-cli
安裝：npm install -g @vue/cli 或 yarn global add @vue/cli

初始化項目
有三種方式：
3版本（新版本）
	vue create xxx
3版本（界面）
	vue ui
2版本（舊版本）
	先全局安裝@vue/cli-init
	npm install @vue/cli-init -g
	如果不安裝，會報錯提示你需要安裝。然后初始化新建項目
	
安裝serve：
	npm install -g serve
	serve dist

安裝express：
	npm install express -g
	node	//進入編輯模式
	require('express')	//正常就表示NODE_PATH是否配置正確