怎么使用vue-cli3一步一步生成项目(全网最全的中英文对照)
创建vue项目步骤
<1>
vue create 项目名
(enter键确认,并进入下一步)
<2>出现底下两项
default (babel, eslint)(默认初始化一个项目的最小配置,)
Manually select features(手动选择项目特性)
<3>选择manually select (enter键确认,并进入下一步)
Check the features needed for your project: (Press to select, to toggle all, to invert selection)
[为你的项目选择需要的特性,按下空格去选择单项,按下a去选择全部,i反选]
❯◉ Babel [在项目中把es6转化成所有浏览器能识别的es5代码]
◯ TypeScript [micrsoft出的一个js库,能做类型校验]
◯ Progressive Web App (PWA) Support[把网页做的更像原生app]
◯ Router [vue路由插件]
◯ Vuex [vue状态管理,vue的数据库]
◯ CSS Pre-processors [css预处理器]
◉ Linter / Formatter [js代码校验/格式化]
◯ Unit Testing [单元测试,提前找出bug]
◯ E2E Testing [end to end test 端对端测试,测试全流程]
<4>
选择
bebel\router\vuex\CSS Pre-processors\Linter / Formatter
enter键确认,并进入下一步
Use history mode for router? (Requires proper server setup for index fallback in production)(Y/n)
[是否为路由选择历史模式?]
与之对应的有一个hash模式,#login (路由完全由前端控制,不需要后台支持,也不容易报错)
<5>选择no,enter键确认,并进入下一步
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
[选择一个css预处理器(PostCSS[css的babel], Autoprefixer[自动添加浏览器前缀]and CSS Modules[css 模块] are supported by default)]
❯ Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus
<6>选择前三种中的一种,enter键确认,并进入下一步
? Pick a linter / formatter config: (Use arrow keys) [选择一个校验工具和格式化工具(使用箭头选择)]
❯ ESLint with error prevention only [只有js出错才阻止项目运行]
ESLint + Airbnb config [eslint+Airbnb这个公司的规范](最严格)
ESLint + Standard config [eslint+标准规范]
ESLint + Prettier [eslint+prettier规范](最近新出的)
<7> 选择后3种一种,enter,进入下一步
? Pick additional lint features: (Press to select, to toggle all, to invert selection
) [选择额外的检验特性]
❯◉ Lint on save [保存时检验]
◯ Lint and fix on commit [在提交时校验并且修复问题]
<8>都选择,enter,进入下一步
Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
[你更喜欢把bebal\postcss\eslint等这些配置放在哪?]
❯ In dedicated config files [在一个独立的文件中]
In package.json [放在package.json中]
<9>选择第一个,enter,进入下一步
Save this as a preset for future projects? (y/N)
[你希望把本次的设置保存到一个预设吗?]
<10>输入y,enter,进入下一步
Save preset as: [预设的名字是: ]
<11>输入一个名字,比如:test, enter,进入下一步
开始安装依赖
<12>安装完成后,终端出现
Successfully created project lesson2. [成功创建lesson2项目]
? Get started with the following commands:
[通过使用下面的命令开启项目]
$ cd lesson2
$ yarn serve
<13>依次输入
cd lesson2(进入该目录)
yarn serve(启动项目服务器)
或者
cd lesson2 && yarn serve
<14>出现:
yarn run v1.12.3
$ vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin
DONE Compiled successfully in 4486ms 18:01:30
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.43.227:8080/
Note that the development build is not optimized.
To create a production build, run yarn build.
说明项目启动成功!
此时,你的项目运行在
- Local: http://localhost:8080/ (本地访问地址)
- Network: http://192.168.43.227:8080/ (外网访问地址)
这两个地址上,此时按下ctrl+点击上面任意地址(windows上),mac上是command+点击上面任意地址都可以打开本地项目,如果浏览器出现你的项目,就已经搞定了!