vue脚手架坏境配置及其创建和启动项目
作者：互联网
一、安装脚手架之前必须安装node
1.检测此电脑是否安装node-js win+R ==> 输入指令 node -v
2.如果出现不是内部指令则没有安装
3.打开node官网，下载对应位数的node
4.一般安装在c盘当中
5. 安装过程中会出现一个很长很长的单选框，勾上
6.安装完成后会弹出一个对话框 直接关闭
7.打开cmd 输入node -v
8.出现版本号的话说明已经安装成功
9.再在对话框里输入npm -v，检测node包管理是否安装 安装node时自带
10.安装cnpm(淘宝镜像) 指令：npm install -g cnpm --registry=https://registry.npm.taobao.org
11.安装完成后 输入 cnpm -v 检测是否安装成功
二、安装脚手架 安装vue脚手架之前，先安装好node环境！！! 1. 安装webpack npm i webpack-cli -g #全局安装, linux和Mac 需要加sudo webpack-cli -v #安装后, 可查看版本 2. Vue CLI 2.x 2.1 安装 npm i vue-cli -g #全局安装, linux和Mac 需要加sudo vue -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-router Install vue-router? Yes 步骤5 是否添加ESLint 代码检查工具 Use ESLint to lint your code? Yes 步骤6 选择ESLint 检查模式 （步骤5不选时无步骤6） / 凯迪选择的是no ? Pick an ESLint preset (Use arrow keys) ❯ Standard (https://github.com/standard/standard) #标准配置 Airbnb (https://github.com/airbnb/javascript) #Airbnb配置 none (configure it yourself) #自定义 步骤7 设置单元测试 ? Set up unit tests No 步骤8 e2e测试 ? Setup e2e tests with Nightwatch? No 步骤9 选择项目的包管理方式 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 启动项目 进入创建的项目当中 cd+项目名称 npm run dev 启动项目
3. 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 install -g @vue/cli #自动安装最新版本 或者 cnpm install -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脚手架之前，先安装好node环境！！! 1. 安装webpack npm i webpack-cli -g #全局安装, linux和Mac 需要加sudo webpack-cli -v #安装后, 可查看版本 2. Vue CLI 2.x 2.1 安装 npm i vue-cli -g #全局安装, linux和Mac 需要加sudo vue -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-router Install vue-router? Yes 步骤5 是否添加ESLint 代码检查工具 Use ESLint to lint your code? Yes 步骤6 选择ESLint 检查模式 （步骤5不选时无步骤6） / 凯迪选择的是no ? Pick an ESLint preset (Use arrow keys) ❯ Standard (https://github.com/standard/standard) #标准配置 Airbnb (https://github.com/airbnb/javascript) #Airbnb配置 none (configure it yourself) #自定义 步骤7 设置单元测试 ? Set up unit tests No 步骤8 e2e测试 ? Setup e2e tests with Nightwatch? No 步骤9 选择项目的包管理方式 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 启动项目 进入创建的项目当中 cd+项目名称 npm run dev 启动项目
3. 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 install -g @vue/cli #自动安装最新版本 或者 cnpm install -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 全部操作已完成
标签：npm,node,vue,步骤,坏境,ESLint,脚手架,安装 来源： https://www.cnblogs.com/zhzq1111/p/12061151.html