hadoop2.9.2安装hadoop_pid_dir_手把手教你安装使用Vue CLI (2.x 3.x 4.x)

安装vue脚手架之前，先安装好node环境！！!
以下安装过程中，如果重复安装一直报错，可以尝试使用下面命令清理npm缓存

npm cache verifynpm cache clean --force

安装webpack

npm i webpack-cli -g    #全局安装, linux和Mac 需要加sudowebpack-cli -v          #安装后, 可查看版本

Vue CLI 2.x

2.1 安装

npm i vue-cli -g    #全局安装, linux和Mac 需要加sudovue -V             #查看版本号(大写V)

2.2 创建项目

vue init webpack 项目名字

创建项目时一些步骤选项

# 步骤1 项目名称? Project name vue-cli-2.x# 步骤2 项目描述? Project description vue-cli-2.x demo# 步骤3 项目作者? Author lanxy# 步骤4 Vue 构建模式? Vue build (Use arrow keys)❯ Runtime + Compiler: recommended for most users #根组件中使用 template + components  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere  #根组件中使用 render (推荐)# 步骤5 是否安装vue-router? Install vue-router? Yes# 步骤6 是否添加ESLint 代码检查工具? Use ESLint to lint your code? Yes# 步骤7 选择ESLint 检查模式 (步骤5不选时无步骤6)? Pick an ESLint preset (Use arrow keys)❯ Standard (https://github.com/standard/standard) #标准配置  Airbnb (https://github.com/airbnb/javascript)   #Airbnb配置  none (configure it yourself)                    #自定义# 步骤8 设置单元测试? Set up unit tests No# 步骤9 e2e测试? Setup e2e tests with Nightwatch? No# 步骤10 选择项目的包管理方式 npm /yarn? Should we run `npm install` for you after the project has been created? (recommended)❯ Yes, use NPM  Yes, use Yarn  No, I will handle that myself

2.3 启动项目

npm run dev

Vue CLI 3.x/4.x

安装Vue CLI 3.x/4.x 默认会覆盖Vue CLI 2.x的，所以安装时，如果以后不需要使用Vue CLI 2.x 那么需要把2.x版本先卸载掉, 如果还想同时使用，则可通过安装CLI的桥接工具来做兼容

npm uninstall vue-cli #卸载Vue CLI 2.x# 或者安装桥接工具来兼容两者npm i -g @vue/cli-init #安装桥接工具 (linue和Mac 需要加sudo)

3.1 安装Vue CLI 3.x/4.x (目前最新是4.x)

npm i -g @vue/cli #自动安装最新版本

3.2 创建项目

vue create 项目名

创建项目过程步骤选项说明：

# 步骤1 选择预设配置，还是手动配置? Please pick a preset:  default (babel, eslint) #默认配置❯ Manually select features #选此项，进行手动配置# 步骤2 选择添加的配置项(上下键可移动， 空格键选择或者取消选择)下面实心原点表示选中项? Please pick a preset: Manually select features? Check the features needed for your project: ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support  #渐进式Web应用程序 ◉ Router                             #vue-router(vue路由) ◉ Vuex                               #vuex(vue的状态管理模式) ◉ CSS Pre-processors                 #CSS 预处理器(如：less、sass)❯◉ Linter / Formatter                 #代码风格检查和格式化(如：ESlint) ◯ Unit Testing                       #单元测试(unit tests) ◯ E2E Testing                        #e2e(end to end) 测试  # 步骤3  选择是否使用history router：Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由(通过调用浏览器提供的接口)? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) #选n# 步骤4 选中css预处理器? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):  Sass/SCSS (with dart-sass)  Sass/SCSS (with node-sass)❯ Less  #vue 一般搭配此项  Stylus  # 步骤5 选择ESLint 的代码检测模式 (步骤2如果没有选Linter / Formatter项，则无步骤5和6)? Pick a linter / formatter config:  ESLint with error prevention only  #只有错误预防  ESLint + Airbnb config             #Aribnb配置❯ ESLint + Standard config           #标准配置  ESLint + Prettier                  #漂亮配置  # 步骤6 ESLint 的检查时机? Pick additional lint features: ◉ Lint on save             #保存时检查❯◯ Lint and fix on commit   #commit时检查# 步骤7 选择如何存放配置? Where do you prefer placing config for Babel, ESLint, etc.?  In dedicated config files  #独立的文件放置❯ In package.json            #放到package.json中# 步骤8 是否保存本次配置(保存之后在下次创建项目时即可选择预设置项)? Save this as a preset for future projects? (y/N)# 如果选择了yes 最后会提示输入保存的名称，输入回车即可

3.3 启动项目

npm run serve

VUE 项目管理器

在使用Vue CLI 3.x以上时，可以通过命令 `vue ui` 进行启动Vue项目管理器。这样就可以通过项目管理器进行管理项目(例如创建、运行、打包等等操作)