Vue基础环境
Node.js ( v10以上 )
npm
yarn
安装 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?
yes
? Use ESLint to lint your code? (Y/n)
#使用 ESLint 来检查你的代码?
yes
? Pick an ESLint preset (Use arrow keys)
#选择一个 ESLint 预设 ( 使用方向键 )
Standard (https://github.com/standard/standard)
#标准
Airbnb (https://github.com/airbnb/javascript)
none (configure it yourself)
#没有 (自己配置 )
? Set up unit tests (Y/n)
#设置单元测试
no
? 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>
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
安装4.x版本
#安装
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
#(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
#CSS预处理程序
(*) Linter / Formatter
( ) Unit Testing
#单元测试
( ) E2E Testing
#E2E测试
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 版本(使用方向键)
2.x
3.x
? 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)
Less
Stylus
? 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
#在package.json
? Save this as a preset for future projects?
#将其保存为未来项目的预设?
Yes
No
? 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: http://xxx.xxx.xxx.xxx:8080/
Note that the development build is not optimized.
#注意,开发构建没有优化。
To create a production build, run npm run build.
#要创建一个生产构建,请运行 npm run build。
2.x/3.x版本与4.x版本区别