vue-cli创建项目

创建vue项目步骤

<1>

vue create 项目名
(enter键确认,并进入下一步)

1
2
3
<2>出现底下两项

  default (babel, eslint)(默认初始化一个项目的最小配置,)
  
  Manually select features(手动选择项目特性)
1
2
3
<3>选择manually select (enter键确认,并进入下一步)

Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> 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 端对端测试,测试全流程]

1
2
3
4
5
6
7
8
9
10
11
12
<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 (路由完全由前端控制,不需要后台支持,也不容易报错)

1
2
3
4
5
6
7
8
9
10
<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
1
2
3
4
5
6
<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规范](最近新出的)
1
2
3
4
5
<7> 选择后3种一种,enter,进入下一步

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection
) [选择额外的检验特性]
❯◉ Lint on save [保存时检验]
 ◯ Lint and fix on commit [在提交时校验并且修复问题]
1
2
3
4
<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中]
1
2
3
4
<9>选择第一个,enter,进入下一步

 Save this as a preset for future projects? (y/N)
 [你希望把本次的设置保存到一个预设吗?]
1
2
<10>输入y,enter,进入下一步

 Save preset as: [预设的名字是: ]
1
<11>输入一个名字,比如:test, enter,进入下一步

开始安装依赖

<12>安装完成后,终端出现

 Successfully created project lesson2. [成功创建lesson2项目]
?  Get started with the following commands:
[通过使用下面的命令开启项目]

 $ cd lesson2
 $ yarn serve
1
2
3
4
5
6
<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.
--------------------- 
作者：itlixiaolong 
来源：CSDN 
原文：https://blog.csdn.net/lixiaolong240035/article/details/94185903 
版权声明：本文为博主原创文章，转载请附上博文链接！