Node.js ( v10以上 )



安装 Vue-cli 2.x/3.x 版本

#安装 2.x / 3.x 版本 :
npm install vue-cli -g

yarn global add vue-cli

vue list

#卸载 2.x / 3.x 版本 : 
npm uninstall vue-cli -g

#检查安装版本 : 
vue --version

npm : 指明使用 node.js 命令

install : 安装

vue-cli : 要安装的工具

--global : 全局安装

创建项目(基于 webpack 模板) :

D:\text>vue init webpack text-2.9.6

? Project name (text-2.9.6)

vue init webpack text2.9.6

vue init 模板名 项目名

? Project description (A Vue.js project)
? Author (xxx(xxx.@com))
? Vue build (Use arrow keys)
#Vue 构建(使用方向键 )
  Runtime + Compiler: recommended for most users
  #运行时编译器 + : 推荐给大多数用户
  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
  #仅供运行时使用: gzip 最小值约为 6KB ,但模板(或任何特定于 vue的 HTML)只允许在 .vue 文件中使用 - 在其他地方需要渲染函数
? Install vue-router? (Y/n)
#安装 vue-router?
? Use ESLint to lint your code? (Y/n)
#使用 ESLint 来检查你的代码?
? Pick an ESLint preset (Use arrow keys)
#选择一个 ESLint 预设 ( 使用方向键 )
   Standard (
   Airbnb (
   none (configure it yourself)
  #没有 (自己配置 )
? Set up unit tests (Y/n)
? Setup e2e tests with Nightwatch? (Y/n)
#使用 Nightwatch 设置端到端加密测试 ?
? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
#我们应该在项目创建后为你运行 npm install 吗?( 推荐 ) ( 使用方向键 )
  Yes, use NPM
  #使用 NPM
  Yes, use Yarn
  #使用 Yarn
  No, I will handle that myself

To get started:



D:\text>cd tetx

D:\text\text>npm run dev
Your application is running here: http://localhost:8080

安装 Vue-cli 4.x 版本

官网指南 :Vue - cli( 4.x )**

基于 webpack 构建,并带有合理的默认配置 .

( 如果已经安装了 2.x 或 3.x 版本 , 再安装 4.x 版本时出现报错 , 建议卸载掉其他版本后重新安装 4.x 版本 )

报错相关信息 :

 npm ERR! code EEXIST
    # npm 错误!代码 EEXIST

    npm ERR! path C:\Users\AppData\Roaming\npm\node_modules\@vue\cli\bin\vue.js

    npm ERR! dest C:\Users\AppData\Roaming\npm\vue

    npm ERR! EEXIST: file already exists, cmd shim 'C:\Users\AppData\Roaming\npm\node_modules\@vue\cli\bin\vue.js' -> 'C:\Users\AppData\Roaming\npm\vue'
    # 文件已经存在

    npm ERR! File exists: C:\Users\AppData\Roaming\npm\vue
    # 文件是否存在 :

    npm ERR! Remove the existing file and try again, or run npm
    #删除现有文件并重试,或运行 npm

    npm ERR! with --force to overwrite files recklessly.
    #使用 ——强制鲁莽地覆盖文件。

    npm ERR! A complete log of this run can be found in:
    npm ERR!     C:\Users\AppData\Roaming\npm-cache\_logs\2021-07-25T02_38_52_168Z-debug.log


npm install -g @vue/cli

yarn global add @vue/cli

#卸载 :
npm uninstall -g @vue/cli

yarn global remove @vue/cli

#升级 :
npm update -g @vue/cli

yarn global upgrade --latest @vue/cli

#检查安装版本 : 
vue --version
# 4.5.13

安装一个全局的扩展 :

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

创建项目 :

vue create app
Vue CLI v4.5.13
? Please pick a preset:(Use arrow keys)
  #请选择预设:(用箭头键 )
  Default ([Vue 2] babel, eslint)
  #默认([视图 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
  #默认(视图3)([视图3] babel, eslint)
  Manually select features
Vue CLI v4.5.13
? Please pick a preset: Manually select features
#请选择预设 :手动选择功能
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
#检查项目所需的特性: (按 <空格>选择,按 <a>切换所有选项,按 <i>反转选择 )
 (*) Choose Vue version
 #选择 Vue版本
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 #渐进的 Web应用程序 (PWA) 支持
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing
Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, CSS Pre-processors, Linter
#检查您的项目所需的功能:选择 Vue 版本, Babel ,路由器,CSS预处理器, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
#选择要启动项目的 Vue.js 版本(使用方向键)
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
#选择一个CSS预处理程序(默认支持 PostCSS, Autoprefixer 和 CSS 模块):( 使用方向键)
  Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
? Pick a linter / formatter config: (Use arrow keys)
#选择一个linter / formatter 配置:(使用方向键)
  ESLint with error prevention only
  #只有错误预防的 ESLint
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
#选择附加的 lint功能:( 按<space>选择,<a>切换所有,<i>反转选择 )
 ( ) Lint on save
 ( ) Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? 
#你倾向于把 Babel, ESLint 等的配置放在哪里?
In dedicated config files
In package.json
? Save this as a preset for future projects? 
? Save preset as:
#保存预设为: (填写预设名字)

Get started with the following commands:

开始使用以下命令 :

D:\text>cd app

D:\text\app>npm run serve
 App running at:
  - Local:   http://localhost:8080/
  - Network:

    Note that the development build is not optimized.
    To create a production build, run npm run build.
    #要创建一个生产构建,请运行 npm run build。



Empty spaces,fill the pages.