Vue 安装和项目搭建

一、Vue 脚手架的搭建

1、先安装node.js

下载地址：https://nodejs.org/en/ 中文官网：https://nodejs.org/zh-cn/

下载好后，一路下一步就行，安装完成后，打开命令窗口，输入：node -v，若显示版本号，则安装成功。

2、Vue脚手架

用于快速生成 Vue 项目基础架构，其官网地址为：https://cli.vuejs.org/zh/

# 安装3.x版本
npm install -g @vue/cli
vue -V

扩展（可跳过）

#从淘宝镜像源安装cnpm命令
npm install -g cnpm --registry=https://registry.npm.taobao.org
#输入下面命令，若正常显示版本号则安装成功
cnpm -v
cnpm install -g @vue/cli
	
特别注意：
1. 如果提示“无法识别”，有可能是npm的版本过低。
解决办法：npm install -g npm（更新一下版本就好了）。
2. 如果安装失败的话。
解决办法：npm cache clean（清除一下缓存就好了）

二、脚手架的基本用法

有3种方式创建Vue项目

1、基于 交互式命令 的方式，创建 新版Vue项目；

vue create my-project

2、基于 图形化界面 的方式，创建 新版Vue项目；(推荐）

（推荐使用，即在命令行中执行vue ui就会启动图形化界面）

vue ui

3、基于 2.x 旧模板，创建 旧版Vue项目；

npm install -g @vue/cli-init
vue init webpack my-project

三、扩展

基于交互式命令 的方式，创建新版Vue项目演示：

Vue CLI v4.5.6
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features # 手动选择功能

Vue CLI v4.5.6
? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
>(*) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing
# 上下移动，按空格选择确认

Vue CLI v4.5.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Linter
? Choose a version of Vue.js that you want to start the project with
  2.x
> 3.x (Preview)

Vue CLI v4.5.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n # 选择哈希类型路由

Vue CLI v4.5.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use history mode for router? (Requires proper server setup for index fallback in production) No  
? Pick a linter / formatter config: (Use arrow keys)
  ESLint with error prevention only
  ESLint + Airbnb config
> ESLint + Standard config
  ESLint + Prettier

Vue CLI v4.5.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit

Vue CLI v4.5.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

Vue CLI v4.5.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) y # 当前选择是否保存模板

 $ cd vue_project_01
 $ npm run serve

 DONE  Compiled successfully in 5740ms                                                                12:39:59 ├F10: AM┤


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.125.115:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

基于 图形化界面 的方式，创建 新版Vue项目，其流程和交互式命令 的方式一样，只是在其基础上加上ui界面；