vueCli脚手架搭建和文件详解（超详细保姆级教学）

一、找到希望创建项目的文件夹，进入终端

二、执行 vue create 文件夹名称

运行结果如下：

1、选择Manually select features ==> 手动选择特征（自己选择设置）前两个Default是默认推荐设置，其他的则是之前已经创建过的设置

注意：这里选择需要用空格选择，回车是所有想要的配置选择好后确认所有

• Babel ：是将ES6的代码在浏览器中自动转换成ES5的代码 必选
• TypeScript ：JS拓展的一些用法
• Progressive Web App (PWA) Support：渐进Web应用程序(PWA)支持一般不选
• Router：路由必选
• Vuex：Vue开发的状态管理模式必选
• CSS Pre-processors：CSS 预处理器，让CSS变成一门编程语言，可以使用变量，函数，算法等必选
• Linter / Formatter：默认选中
• Unit Testing：单元测试
• E2E Testing：单元测试

2、进入Vue版本号的选择，一般选择3.x即可，老项目需要选择2.x

3、Use class-style component syntax?：使用css风格的组件语法？==> 输入y确认

4、Use Babel alongside TypeScript ：是否使用Babel处理TS？ ==> 选择y确认

5、Use history mode for router?：路由使用history模式？==> 选择y确认

6、Pick a CSS pre-processor ：选择一个CSS的预处理器 ==> 选择第一个Sass/SCSS

7、选择第三个ESlint + Standard config：通用规范

• ESLint with error prevention only ：只配置使用 ESLint 官网的推荐规则
• ESLint + Airbnb config ：Airbnb规范
• ESLint + Standard config :通用规范
• ESLint + Prettier ：Prettier规范

8、选择lint on save （养成代码的良好习惯）

• Lint on save：代码不符合 lint 规则时，会提示 warning；语法错误，会直接在页面上显示 error
• Lint and fix on commit：代码除语法错误不会提示 warning

9、建议选择In dedicated config files

• In dedicated config files：单独创建两个文件夹
• In package.json ：放在package.json文件内

10、Save this as a preset for future projects? ：是否保存这些设置；保存命名后就会和开始文件一样在开头生成一个demo文件设置可选择

11、Save preset as：保存这些设置的名字（最好和vue create 文件名的名字一致）

12、恭喜你，创建成功！关闭该页面

13、进入Vue create 文件名 的文件夹内打开终端输入 npm run serve

• local：该地址就是自己本地可以直接访问的地址，直接进入浏览器输入该地址即可
• Network：服务器地址，别人也可以访问

三、打开vscode将刚创建好的文件夹加入工作区

注意：！！！这里由于刚创建好的文件夹不一定在根目录，所以容易会将该文件夹的外层文件夹加入工作区，会导致后面vscode中eslint插件的工作失败，不会自动审查错误代码，建议直接将该文件夹添加到工作区！！！

• public // 开发环境服务器监听 根目录
  • index.html：单页面的页面
  • favicon.ico：浏览器最上方图标 // 可以在index.html中的最后一段进行修改

    •   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
      

• src // 源码目录
  • assets // 存储 开发时用到静态资源 css js imgs fonts
  • components // 存储开发时公共UI组件
  • router // 路由配置
  • store // vuex配置
  • views // 存储路由组件
  • App.vue // 根组件 作为 app应用实例的 config
  • main.js // webpack入口文件
• .browserslistrc // postcss 浏览器兼容配置
• .eslintrc // eslint配置文件
• babel.config.js // babel配置es6转es5
• package.json
• vue.config.js // 项目开发时配置，可以在这里修改默认配置