个人学习用
一、Vue项目搭建前准备
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统：
查看官方文档
- 安装版本：@vue/cli 3.x 版本
- 使用系统：windows10 64位
-
前期准备：需提前安装好node和npm，npm -v 和 node -v 测试版本号
npm与node版本号检查 - 开发工具：WebStorm
- 快捷键合集：
- 使用Webstorm的Terminal命令行终端 —— alt+F12
- 查看当前vue/cli的版本号 —— vue --version
- 获取帮助，查看vue/cli的命令合集 —— vue -h
- 新建项目 —— vue create xxx
- 运行项目 —— npm run serve
- 打包部署 —— npm run build
二、vue/cli脚手架安装流程
-
进入开发工具Webstorm，点击左下角的Terminal命令行终端，快捷键（alt+F12）。输入（npm install -g @vue/cli）安装手脚架工具。输入（vue --version）查看当前安装的版本号。
vue -h（查看全部命令帮助） 创建新的项目
输入vue create “新建项目名” 创建项目，并选择预设，使用default（系统默认预设）还是 manually select features（手动选择预设）。
Vue CLI v3.7.0
? Please pick a preset:
default (babel, eslint)
> Manually select features
- 手动选择时，通过键盘上(PgUp)下(PgDn)箭头选择，空格键选中，回车确认提交。
Vue CLI v3.7.0
? Please pick a preset: Manually select features
? Check the features needed for your project:
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
>(*) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
- 选择css样式预处理程序，使用stylus。
Vue CLI v3.7.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors, Linter
? 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
> Stylus
- 选择ESLint规则，使用Standard config（标准配置）。
Vue CLI v3.7.0
? Please pick a preset: (Use arrow keys)
? Check the features needed for your project: Babel, CSS Pre-processors, Linter
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config:
ESLint with error prevention only
ESLint + Airbnb config
> ESLint + Standard config
ESLint + Prettier
- 选择是在保存时Lint还是提交时Lint。
Vue CLI v3.7.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors, Linter
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? 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 v3.7.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors, Linter
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? 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
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files
In package.json
- 是否保存这次配置的预设。 N（选择不保存）
Vue CLI v3.7.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors, Linter
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? 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
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)
-
安装成功，cd xxx（进入你创建的项目目录下），输入npm run serve启动项目（vue/cli2.x使用的是npm run dev）。
安装成功 访问地址可以通过本地Local访问或者通过本机ip地址访问，npm run build指的是版本打包部署指令。
App running at:
- Local: http://localhost:8082/
- Network: http://192.168.1.3:8082/
Note that the development build is not optimized.
To create a production build, run npm run build.
