最新最全的vue搭建教程

一、使用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安装脚本并执行
source ~/.profile #更新环境变量

二、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稳定版,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.如果你事先已经全局安装了旧版本的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.安装扩展

npm install -g @vue/cli-service-global

三、开始创建项目:

vue create myproject  #myproject 是文件夹名字，如果不存在会自动创建文件夹，如果存在会安装到那个文件夹中。

1. Please pick a preset: Manually select features   #选择手动配置
2. Check the features needed for your project: (Press  to select,  to toggle all,  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 预处理器。
#Linter / Formatter                         // 支持代码风格检查和格式化。
#Unit Testing                               // 支持单元测试。

3.Use class-style component syntax? Yes #使用样式组件
4.Use Babel alongside TypeScript for auto-detected polyfills? Yes #使用Babel和TypeScript 自动检测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预处理器 “dart-sass”
7.Pick a linter / formatter config: Basic
8. Pick additional lint features: (Press  to select,  to toggle all,  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 #独立文件存放
12.Save this as a preset for future projects? No #是否将此保存为未来项目的预设
13.Pick the package manager to use when installing dependencies: NPM   

启动项目

npm run serve

启动图形化界面

vue ui