一、nvm安裝與node版本管理

nvm安裝

1、nvm地址：https://github.com/coreybutler/nvm-windows/releases
2、無需配置安裝包，nvm-setup-v1.1.10.zip
解壓后雙擊nvm-setup.exe，選擇安裝路徑，一路next即可
打開dos窗口輸入nvm version查看安裝是否成功

node版本管理

1、nvm可配置國內(nèi)鏡像

在nvm安裝路徑下找到setting.txt文件，打開，新增如下信息
	node_mirror: https://npm.taobao.org/mirrors/node/
	npm_mirror: https://npm.taobao.org/mirrors/npm/
即可完成淘寶鏡像的配置

2、nvm管理node版本

nvm list  nvm ls 已安裝版本列表
nvm current 當(dāng)前node版本
nvm install 版本號  安裝指定node版本
nvm uninstall 版本號   卸載指定node版本
nvm use 版本號  切換到指定版本
nvm list available 顯示可下載的版本列表

PS：若無法切換node版本，或者出現(xiàn)“‘npm’ 不是內(nèi)部或外部命令,也不是可運行的程序 或批處理文件”或者“‘node’ 不是內(nèi)部或外部命令,也不是可運行的程序 或批處理文件”問題時。使用nvm卸載所有版本node，手動卸載安裝nvm之前的nodejs。然后使用nvm安裝需要的node，再切換即可成功。

二、vue項目的搭建與啟動

vue項目的搭建

Vue CLI是一個基于 Vue.js 進行快速開發(fā)的完整系統(tǒng)，提供：
通過 @vue/cli 實現(xiàn)的交互式的項目腳手架。
通過 @vue/cli + @vue/cli-service-global 實現(xiàn)的零配置原型開發(fā)。
一個運行時依賴 (@vue/cli-service)，該依賴：
可升級；
基于 webpack 構(gòu)建，并帶有合理的默認(rèn)配置；
可以通過項目內(nèi)的配置文件進行配置；
可以通過插件進行擴展。
一個豐富的官方插件集合，集成了前端生態(tài)中最好的工具。
一套完全圖形化的創(chuàng)建和管理 Vue.js 項目的用戶界面。
Vue CLI 致力于將 Vue 生態(tài)中的工具基礎(chǔ)標(biāo)準(zhǔn)化。它確保了各種構(gòu)建工具能夠基于智能的默認(rèn)配置即可平穩(wěn)銜接，這樣你可以專注在撰寫應(yīng)用上，而不必花好幾天去糾結(jié)配置的問題。與此同時，它也為每個工具提供了調(diào)整配置的靈活性，無需 eject。

1、搭建vue項目環(huán)境

 1、1  安裝淘寶鏡像源  npm install -g cnpm --registry=https://registry.npm.taobao.org
 1、2  安裝vue-cli : npm install -g vue-cli

2、使用命令 vue init webpack test 搭建vue項目, “test ” 是你的項目名稱。

Vue build ==> 打包方式，回車即可；
Install vue-router ==> 是否要安裝 vue-router，項目中要使用到 Y
Use ESLint to lint your code ==> 是否需要 js 語法檢測  n
Set up unit tests ==> 是否安裝 單元測試工具  n ；
Setup e2e tests with Nightwatch ==> 是否需要 端到端測試工具  n ；

3、項目啟動文章來源地址http://www.zghlxwxcb.cn/news/detail-828037.html

執(zhí)行完第二步后，會生成test目錄，進入目錄執(zhí)行npm run dev即可啟動項目，
或者執(zhí)行npm install  yarn；yarn run dev也可啟動

1、build：構(gòu)建腳本目錄
　　　　1）build.js ==> 生產(chǎn)環(huán)境構(gòu)建腳本；
　　　　2）check-versions.js ==> 檢查npm，node.js版本；
　　　　3）utils.js ==> 構(gòu)建相關(guān)工具方法；
　　　　4）vue-loader.conf.js ==> 配置了css加載器以及編譯css之后自動添加前綴；
　　　　5）webpack.base.conf.js ==> webpack基本配置；
　　　　6）webpack.dev.conf.js ==> webpack開發(fā)環(huán)境配置；
　　　　7）webpack.prod.conf.js ==> webpack生產(chǎn)環(huán)境配置；
2、config：項目配置
　　　　1）dev.env.js ==> 開發(fā)環(huán)境變量；
　　　　2）index.js ==> 項目配置文件；
　　　　3）prod.env.js ==> 生產(chǎn)環(huán)境變量；
3、node_modules：npm 加載的項目依賴模塊
4、src：這里是我們要開發(fā)的目錄，基本上要做的事情都在這個目錄里。里面包含了幾個目錄及文件：
　　　　1）assets：資源目錄，放置一些圖片或者公共js、公共css。這里的資源會被webpack構(gòu)建；
　　　　2）components：組件目錄，我們寫的組件就放在這個目錄里面；
　　　　3）router：前端路由，我們需要配置的路由路徑寫在index.js里面；
　　　　4）App.vue：根組件；
　　　　5）main.js：入口js文件；
5、static：靜態(tài)資源目錄，如圖片、字體等。不會被webpack構(gòu)建
6、index.html：首頁入口文件，可以添加一些 meta 信息等
7、package.json：npm包配置文件，定義了項目的npm腳本，依賴包等信息
8、README.md：項目的說明文檔，markdown 格式
9、 .xxxx文件：這些是一些配置文件，包括語法配置，git，svn配置等

到了這里，關(guān)于nvm對node版本進行管理及疑難解決，vue項目搭建與啟動的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！