一衰腌、使用NVM安裝nodejs---nvm是node.js版本管理器渊迁。
1.安裝nvm
一址儒、Ubuntu安裝
sudo apt-get update
sudo apt-get install build-essential libssl-dev
curl https://raw.githubusercontent.com/creationix/nvm/v0.16.1/install.sh | sh #下載nvm安裝腳本并執(zhí)行
source ~/.profile #更新環(huán)境變量
二踱卵、windows安裝 :https://github.com/coreybutler/nvm-windows/releases
在nvm的安裝路徑下找到settings.txt打開:
taobao:
node_mirror: npm.taobao.org/mirrors/node/
npm_mirror: npm.taobao.org/mirrors/npm/
tx:
node_mirror: http://tnpm.oa.com/mirrors/node/
npm_mirror: http://tnpm.oa.com/mirrors/npm/
2.列出可用的node.js版本
nvm ls-remote
3.安裝nodejs穩(wěn)定版,Node 版本要求,Vue CLI 需要 8.9 或更高版本 (推薦 8.11.0+)今豆。
nvm install 8.11.1
nvm use 8.11.1
node -v #查看是否安裝成功
npm config set proxy [http://proxy.xxxx.com:8080](http://proxy.xxx.com:8080/)
npm config set https-proxy [http://proxy.xxxx.com:8080](http://proxy.xxx.com:8080/)
npm config set registry http://r.tnpm.oa.com
二灯蝴、Vue-cli3安裝教程
1.如果你事先已經(jīng)全局安裝了舊版本的vue-cli(1.x 或 2.x),你需要先卸載它:
npm uninstall vue-cli -g
2.安裝vue-cli:
npm install -g @vue/cli --registry=http://x.xnpm.oa.com --proxy=http://x.xnpm.oa.com:80 --verbose
# OR
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install yarn
yarn global add @vue/cli
3.查看版本
vue --version // 查詢版本是否為3.x
4.安裝擴(kuò)展
npm install -g @vue/cli-service-global
三撇簿、開始創(chuàng)建項(xiàng)目:
vue create myproject #myproject 是文件夾名字聂渊，如果不存在會(huì)自動(dòng)創(chuàng)建文件夾，如果存在會(huì)安裝到那個(gè)文件夾中四瘫。
1. Please pick a preset: Manually select features #選擇手動(dòng)配置
2. Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
# 空格取消或選中汉嗽，a為全選，i為反選.
#TypeScript // 支持使用 TypeScript 書寫源碼--建議不選
#Progressive Web App (PWA) Support // PWA 支持--建議不選
#Router // 支持 vue-router
#Vuex // 支持 vuex
#CSS Pre-processors // 支持 CSS 預(yù)處理器莲组。
#Linter / Formatter // 支持代碼風(fēng)格檢查和格式化诊胞。
#Unit Testing // 支持單元測試。
3.Use class-style component syntax? Yes #使用樣式組件
4.Use Babel alongside TypeScript for auto-detected polyfills? Yes #使用Babel和TypeScript 自動(dòng)檢測polyfills
5.Use history mode for router? (Requires proper server setup for index fallback in production) No #路由器使用歷史模式，建議不使用
6.Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass) #選擇CSS預(yù)處理器 “dart-sass”
7.Pick a linter / formatter config: Basic
8. Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save #保存就檢測
9.Pick a unit testing solution: Jest #選擇單元測試
10.Pick a E2E testing solution: Cypress #選擇E2E測試解決方案
11.Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files #獨(dú)立文件存放
12.Save this as a preset for future projects? No #是否將此保存為未來項(xiàng)目的預(yù)設(shè)
13.Pick the package manager to use when installing dependencies: NPM
啟動(dòng)項(xiàng)目
npm run serve
啟動(dòng)圖形化界面
vue ui
