vue-cli3初始化仓库

全局安装vue-cli

cnpm install -g @vue/cli

检测是否安装成功

vue --vesion

新建项目

创建一个 名字为hello-world的项目

vue create resource-share

创建要给项目 如果不愿意用命令行，还可以用图形界面

vue ui

选择配置

如果不使用UI界面，会是这样

如果你上一次配置并保存了这里就会指向一个你上次保存的名字，第一次执行create是没有的
按键盘上下键可以选择默认（default）还是手动（Manually），如果选择default，一路回车执行下去就行了
继续手动一下

选项配置

当你选择后会出现上面图上的东西，这里你可以自由选择用哪些配置，按上下键
选择哪一个，按空格键确定，A键是全选，所有的都选择好后，按enter键进行下一步

在选择功能后，会询问更细节的配置，

• Babel：将ES6编译成ES5
• TypeScript：JS超集，主要是类型检查
  • 是否使用class风格的组件语法：Use class-style component syntax?
  • 是否使用babel做转义：Use Babel alongside TypeScript for auto-detected polyfills?
• Progressive Web App（PWA）Support：渐进式WEB应用支持
• Router：路由
• Vuex：状态管理
• Linter/ Formatter：代码检查工具
  • 选择Linter / Formatter规范类型：Pick a linter / formatter config
  • 选择lint方式，保存时检查/提交时检查：Pick additional lint features
• CSS Pre-processors：css预编译
  • 选择CSS 预处理类型：Pick a CSS pre-processor
• Unit Testing：单元测试，开发过程中前端对代码进行自运行测试
• E2E Testing: 端对端测试，属于黑盒测试，通过编写测试用例，自动化模拟用户操作，确保组件间通信正常，程序流数据传递如预期。

我们的选择如下

由于我已经安装了vue-router,他会问这么一句

Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
我们这里先选择no

此处详情：history与hash模式

选择css预处理工具

我是用less

代码检查与自动化代码格式

• eslint w…: 只进行报错提醒；（如果还没熟悉eslint,推荐使用此模式）
• eslint + A…: 不严谨模式；
• eslint + S…: 正常模式
• eslint + P…: 严格模式；

上面这个是问你选择哪个自动化代码格式化检测，配合vscode编辑器的
Prettier - Code formatter插件，我选的随后一个

是否保存设置

• 这里第一个选项是问你是否保存刚才的配置，选择确定后，你下次再创建新项目就有你以前选择的配置了，不用重新再配置一遍了
• 第二个保存时检查/提交时检查：Pick additional lint features

我不选择第一项,不用保存配置，选择第二项

配置文件放哪

上边这俩意思问你像，babel,postcss,eslint这些配置文件放哪？
第一个是：放独立文件放置
第二个是：放package.json里
这里推荐放单独配置文件，选第二个

上面的所有配置是否保存？

上边问你是否将以上这些将此保存为未来项目的预配置吗？
如果选择是的话，会出一个描述项目，你随意选择，点击确定就开始下载模板了

之后回扯就好了

项目启动

 $ cd resource-web
 $ npm run serve