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

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 ***ponent 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 ***mit:代码除语法错误不会提示 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:该地址就是自己本地可以直接访问的地址,直接进入浏览器输入该地址即可
  • ***work:服务器地址,别人也可以访问

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

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

  • public // 开发环境服务器监听 根目录
    • index.html:单页面的页面
    • favicon.ico:浏览器最上方图标 // 可以在index.html中的最后一段进行修改
      •   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
        
  • src // 源码目录
    • assets // 存储 开发时用到静态资源 css js imgs fonts
    • ***ponents // 存储开发时公共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 // 项目开发时配置,可以在这里修改默认配置
转载请说明出处内容投诉
CSS教程_站长资源网 » vueCli脚手架搭建和文件详解(超详细保姆级教学)

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买